Angular单选按钮Label显示异常及Form表单值赋值错误问题求解

问题根因 #

• 同一个表单控件同时绑定了[ngModel]（模板驱动表单语法）和formControlName（响应式表单语法），Angular 不支持两种表单逻辑混用，会导致赋值优先级冲突，无法正确更新值
• 两个单选按钮的[value]都绑定了同一个变量buttonName，两个选项的值永远一致，无法区分选中状态，所以始终显示默认的No选项
• 第二个单选按钮的name属性缺少闭合引号，会触发HTML解析错误，导致后续标签渲染异常，这也是你删除Yes的label后所有label都不显示的核心原因
• 单选按钮id和label的for属性逻辑颠倒：id为yes的单选按钮对应了显示No的label，id为no的单选按钮对应了显示Yes的label，本身逻辑就不匹配

修复代码 #

组件TS代码

Form: FormGroup;
ngOnInit(): void {
  this.createForm();
  if (this.isEdit) {  
    this.editForms();
  }
  // 如果需要监听值变化可以用以下代码，不需要额外写change事件
  // this.Form.get('isRepository').valueChanges.subscribe(val => {
  //   this.isPrivate = val === 'Yes';
  // })
}

private createForm() {
  this.Form = this.formBuilder.group({     
    // 可以自定义默认值，比如默认是'No'
    isRepository: [{ value: 'No', disabled: false }],
    remember: true
  });
}

// editForms方法里赋值直接操作表单控件即可，示例：
// private editForms() {
//   // 假设编辑接口返回的私有库字段为布尔值isRepo
//   this.Form.get('isRepository').setValue(后端返回的isRepo ? 'Yes' : 'No')
// }

模板HTML代码

<form [formGroup]="Form">
  <div class="form-group">
    <label>Private Repository</label>
    <div class="switch">
      <!-- No选项 -->
      <input type="radio" class="switch-input" id="no" value="No" name="isRepository" formControlName="isRepository">
      <label for="no" class="switch-label switch-label-off">No</label>
      <!-- Yes选项 -->
      <input type="radio" class="switch-input" id="yes" value="Yes" name="isRepository" formControlName="isRepository">
      <label for="yes" class="switch-label switch-label-on">Yes</label>
      <span class="switch-selection"></span>
    </div>
  </div>
</form>

如果不需要额外的选中回调逻辑，原来的isPrivateCheck方法可以直接删除，响应式表单会自动维护isRepository字段的值，需要取值的时候直接调用this.Form.get('isRepository').value即可。

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