Angular单选框选后自动赋值文本框，提交后Remark字段存为null问题

在Angular项目中，除Remark字段外，其余文本框的值均可正常保存至数据库。选中Score单选框时，Remark文本框的值会更新为5，但点击保存按钮后，数据库的Remark列显示为null。

场景示例 #

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

现有代码 #

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模板 #

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

问题原因 #

1. 重复绑定[(ngModel)]：Remark输入框同时绑定了selectedValue1和service.formData1.Remark，Angular无法处理双向绑定的冲突，导致提交时service.formData1.Remark未被正确赋值。
2. onRadio1方法逻辑错误：调用onRadio1('5')时传入的是字符串'5'，但方法里试图取event.target.value，这里的event实际是字符串，会导致赋值失败，selectedValue1最终还是空值。

修正方案 #

1. 移除重复的ngModel绑定 #

让Remark输入框只绑定service.formData1.Remark，因为最终提交的是service.formData1中的数据。

2. 修正onRadio1方法逻辑 #

直接在单选框的change事件中给service.formData1.Remark赋值，不需要额外的selectedValue1变量。

修正后的代码如下：

component.ts

onSubmit(form: NgForm){
  this.service.formSubmitted = true;    
  if (form.valid) {
    this.service.postgroup1()
    .subscribe({next: res => {        
      console.log(res);
    }})
  }    
  else {
    this.toastr.error('请输入数据');
    }
}  

// 移除多余变量，直接操作目标数据
onRadio1(): void {
 this.service.formData1.Remark = '5';
}

HTML模板

<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()"> &nbsp;
<input id="Remark" name="Remark" [(ngModel)]="service.formData1.Remark">
<br><br>

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

预期结果 #

保存后数据库中的数据如下：

内容的提问来源于stack exchange，提问作者Samal