My radio button is showing Yes or No depending on whether the SQL database value is "T" or-CodePudding

Here's my code for showing yes or no based on a SQL database. What I am trying to achieve is to update the SQL database based on the user's selection again. When I use ngModel to update a SQL database, I get the error message "Cannot assign to read only property "printerOn" of object "[object Object]."

<div *ngIf="system$ |async let result">
        <input 
        type="radio" 
        id="printer-on" 
        name="printer" 
        value="T" 
        [(ngModel)]="result.printerOn"
        (change)="onChangePrinter($event)"
        />
        <label for="printer-on">Yes</label>
         
        <input 
        type="radio" 
        id="printer-off" 
        name="printer" 
        value="F" 
        [(ngModel)]="result.printerOn"
        (change)="onChangePrinter($event)"
        />
        <label for="printer-off">No</label>
 </div>


 onChangePrinter(e){
    console.log(e.target.value);
    //code to update sql database into "T" or "F"
  }

CodePudding user response：

It's looks like work.

BTW. you can split the [(ngModel)] in [ngModel] and (ngModel) and pass to the function the "value" and don't use change

<div *ngIf="data$ | async; let result">
  <input
    type="radio"
    id="printer-on"
    name="printer"
    value="T"
    [ngModel]="result.printerOn"
    (ngModelChange)="result.printerOn = $event; doSomething(result.printerOn)"
  />
  <label for="printer-on">Yes</label>
  <input
    type="radio"
    id="printer-off"
    name="printer"
    value="F"
    [ngModel]="result.printerOn"
    (ngModelChange)="result.printerOn = $event; doSomething(result.printerOn)"
  />
  <label for="printer-off">No</label>
  <pre>
{{ result | json }}
  </pre>
</div>

See stackblitz