All of the values in the textboxes are saving correctly into the database except remark field which is displaying null. From my shared codes below, when l checked on score radio button, remark textbox value is updated to 5 and when l clicked on save button all the input data are saved except remark column showing null in the database.

group1 textbox

Textbox1          Textbox2        Textbox3
Name= 'Horse',    Score= '1',      Remark= '5'

Below is codes that l had tried

component.ts

onSubmit(form: NgForm){
this.service.formSubmitted = true;    
//Group1
if (form.valid) {
  this.service.postgroup1()
  .subscribe({next: res => {        
    console.log(res);
  }})
}    
else {
  this.toastr.error('Please Enter Your Data ');
  }
}  

selectedValue1: string = '';

onRadio1(event: any): void {
 this.selectedValue1 = event.target.value;
}

html.ts

<form id="formId" #form="ngForm" (submit)="onSubmit(form)">

<!-- Group1 -->
<input type="hidden" name="Id" [(ngModel)]="service.formData1.Id" > 
<input id="Name" name="Name" [(ngModel)]="service.formData1.Name" placeholder='Tagno'>
<input type="radio" name='Score' value='1' [(ngModel)]="service.formData1.Score" (change)="onRadio1('5')"> &nbsp;
<input id="Remark" name="Remark" [(ngModel)]="selectedValue1" [(ngModel)]="service.formData1.Remark">
<br><br>

  
<div>
    <div style="display: inline-block;" id="toast_target">
        <button type="submit" >Save</button>
    </div>
</div>
</form>    

Expected output

All of the values in the textboxes are saving correctly into the database except remark field which is displaying null. From my shared codes below, when l checked on score radio button, remark textbox value is updated to 5 and when l clicked on save button all the input data are saved except remark column showing null in the database.

group1 textbox

Textbox1          Textbox2        Textbox3
Name= 'Horse',    Score= '1',      Remark= '5'

Below is codes that l had tried

component.ts

onSubmit(form: NgForm){
this.service.formSubmitted = true;    
//Group1
if (form.valid) {
  this.service.postgroup1()
  .subscribe({next: res => {        
    console.log(res);
  }})
}    
else {
  this.toastr.error('Please Enter Your Data ');
  }
}  

selectedValue1: string = '';

onRadio1(event: any): void {
 this.selectedValue1 = event.target.value;
}

html.ts

<form id="formId" #form="ngForm" (submit)="onSubmit(form)">

<!-- Group1 -->
<input type="hidden" name="Id" [(ngModel)]="service.formData1.Id" > 
<input id="Name" name="Name" [(ngModel)]="service.formData1.Name" placeholder='Tagno'>
<input type="radio" name='Score' value='1' [(ngModel)]="service.formData1.Score" (change)="onRadio1('5')"> &nbsp;
<input id="Remark" name="Remark" [(ngModel)]="selectedValue1" [(ngModel)]="service.formData1.Remark">
<br><br>

  
<div>
    <div style="display: inline-block;" id="toast_target">
        <button type="submit" >Save</button>
    </div>
</div>
</form>    

Expected output

• html
• angular
• forms
• angular-forms
• ngmodel

• you have typo (two ngModel) remove one <input id="Remark" name="Remark" [(ngModel)]="service.formData1.Remark"> – Naren Murali Commented Mar 10 at 10:24
• @Naren the first ngModel binding is for inserting the value of the radio into it, while the second is for binding data into the database. I also tried value='selectedValue1' and [ngModel]=selectedValue1 but none is saving the value of remark field into the database. – Samal Commented Mar 10 at 10:29

1 Answer 1

There can be only one [(ngModel)] I think that is why you are getting bugs.

Whatever actions you want to do, just update on a single property.

<input id="Remark" name="Remark" [(ngModel)]="service.formData1.Remark">

So the event, should update the service.formData1.Remark property.

onRadio1(event: any): void {
 this.service.formData1.Remark = event.target.value;
}