Search code examples
angularangular-ngmodelngrx-store

My radio button is showing Yes or No depending on whether the SQL database value is "T" or "F." In addition, I want an OnChange event


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"
  }
                           

Solution

  • 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