Angular响应式表单：如何动态设置form.controls属性名替代硬编码？

这问题我在做Angular动态表单时也碰到过，硬编码属性名确实没法适配多组不同命名的复选框，给你一个最贴合现有代码的解决方案：

你看你已经在模板里用了[formArrayName]="question.key"，这说明question.key就是当前复选框组对应的FormArray在表单实例中的属性名（比如你提到的"options"或"option-2"）。那直接把硬编码的"options"替换成question.key就能实现动态化了，完全不用写死！

修改后的代码如下：

<div *ngSwitchCase="'arraytext'" >
  <label class="col-sm-6" 
         [formArrayName]="question.key" 
         *ngFor="let order of form.controls[question.key].controls; let i = index" >
    <input type="checkbox" 
           [formControlName]="i" 
           class="form-control">
    {{order.value}}
  </label>
</div>

额外优化：添加空值保护 #

为了避免当question.key对应的FormArray不存在时出现报错，可以用上Angular支持的可选链操作符?.，增强代码的健壮性：

<div *ngSwitchCase="'arraytext'" >
  <label class="col-sm-6" 
         [formArrayName]="question.key" 
         *ngFor="let order of form.controls[question.key]?.controls; let i = index" >
    <input type="checkbox" 
           [formControlName]="i" 
           class="form-control">
    {{order.value}}
  </label>
</div>

拓展说明 #

如果你的question对象里有专门存储FormArray名称的字段（比如question.formArrayPropName），也可以用这个字段代替question.key，只要在组件中给每个问题实例正确赋值对应的属性名即可，灵活性会更高。

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