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