Angular中动态设置radio类型input的value属性失败问题

问题根源 #

1. Radio字段缺少value定义：你的formHtmlSetup方法中，radio类型的字段未配置value属性，导致绑定无值可取。
2. 错误的绑定方式：使用[attr.value]绑定的是HTML属性，而Angular表单控件需要绑定DOM属性value，[attr.value]无法正确关联FormControl的值更新。

修复步骤 #

1. 给Radio字段添加Value属性

修改formService中的formHtmlSetup方法，为每个radio项补充value：

formHtmlSetup() {
  return [
    { type: 'text',id: 'name',name: 'name', label: 'Name', validation: { required: true } },
    { type: 'text',id: 'description', name: 'description', label: 'Description', validation: { required: true } },
    { type: 'text',id: 'image', name: 'image', label: 'Image', validation: { required: true } },
    { type: 'number',id: 'price', name: 'price', label: 'Price', validation: { required: true } },
    // 补充value属性
    { type: 'radio',id: 'pm', name: 'cakeType', label: 'Pm', value: 'pm', validation: { required: true } },
    { type: 'radio',id: 'pie', name: 'cakeType', label: 'Pie', value: 'pie', validation: { required: true } },
  ]
}

2. 改用DOM属性绑定Value

修改模板中的input绑定，将[attr.value]替换为[value]，无需条件判断（其他输入类型也兼容此绑定方式）：

<form [formGroup]="formCake" (ngSubmit)="onSubmit()">
  <ng-container *ngFor="let template of formTemplate">

    <label for="{{template.id}}">{{template.label}}: </label>
    
     <input id="{{template.id}}" 
     type="{{template.type}}" 
     [name]="template.name"  
     [formControlName]="template.name" 
     [value]="template.value">
  
  </ng-container>
</form>

验证说明 #

修改完成后，选择radio选项时，cakeType对应的FormControl会自动更新为选中项的value值。你可以在onSubmit方法中添加日志验证：

onSubmit() {
  console.log(this.formCake.value);
  // 提交逻辑...
}

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