Angular11动态表单报错control.registerOnChange is not a function如何解决

报错原因 #

该错误是表单控件类型不匹配导致的：
你的referentials FormArray中存储的每一项都是FormGroup实例（包含value、libelle等6个FormControl子控件），但模板中直接将循环索引i作为formControlName绑定给input，相当于把FormGroup实例当成FormControl绑定到输入框。只有FormControl实例存在registerOnChange方法，Angular调用该方法时找不到对应实现就抛出了错误。

解决方法 #

修正HTML模板的表单绑定逻辑，给每个循环项绑定对应FormGroup的上下文，再绑定FormGroup内的具体字段即可：

<tbody formArrayName="referentials">
  <tr 
    *ngFor="let referential of referentialArray.controls; let i = index"
    <!-- 绑定当前行对应索引的FormGroup上下文 -->
    [formGroupName]="i"
  >
    <!-- formControlName对应FormGroup内声明的字段名 -->
    <td><input type="text" formControlName="value"></td>
    <td><input type="text" formControlName="libelle"></td>
    <!-- 其余primaryColor、secondaryColor等字段按需求同理绑定 -->
  </tr>
</tbody>

补充注意事项 #

由于你调用了this.form.disable()将整个表单置为禁用状态，若要获取表单全量值，不要使用this.form.value（该属性不会返回禁用控件的值），请使用this.form.getRawValue()获取所有控件的数值。

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