Angular 15中使用FormBuilder出现RegisterOnChange is not a function错误

这个错误ERROR TypeError: control.registerOnChange is not a function的核心原因有两个：混用响应式表单（formControlName）与模板驱动表单（ngModel），或者FormArray中未正确创建FormControl/FormGroup实例。以下是具体的修复步骤：

1. 移除ngModel绑定，完全采用响应式表单模式 #

响应式表单不需要依赖ngModel，同时使用会导致Angular无法正确识别表单控件实例，触发该错误。直接通过formControlName绑定FormArray中的控件即可。

2. 确保FormArray的每个元素都是合法的表单控件实例 #

从后端获取数据后，不能直接将原始值（如布尔值）推入FormArray，必须用FormControl或FormGroup包裹，否则Angular无法将其识别为可注册变更事件的表单控件。

完整实现示例 #

组件类代码

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { AccessoryApiService } from './accessory-api.service';

@Component({
  selector: 'app-accessory-form',
  templateUrl: './accessory-form.component.html'
})
export class AccessoryFormComponent implements OnInit {
  accessoryForm: FormGroup;
  backendAccessories: any[] = []; // 存储从后端获取的配件原始数据

  constructor(
    private fb: FormBuilder,
    private apiService: AccessoryApiService
  ) {
    // 初始化表单，包含空的FormArray
    this.accessoryForm = this.fb.group({
      accesoryList: this.fb.array([])
    });
  }

  ngOnInit(): void {
    this.loadAccessories();
  }

  loadAccessories(): void {
    this.apiService.getAccessories().subscribe(res => {
      this.backendAccessories = res;
      const accessoryArray = this.accessoryForm.get('accesoryList') as FormArray;
      
      // 清空原有控件，避免重复添加
      accessoryArray.clear();
      
      // 为每个配件创建FormControl，绑定选中状态
      res.forEach(item => {
        accessoryArray.push(new FormControl(item.isChecked));
      });
    });
  }

  // 便捷获取FormArray的方法，供模板使用
  get accessoryArray(): FormArray {
    return this.accessoryForm.get('accesoryList') as FormArray;
  }
}

HTML模板代码

<form [formGroup]="accessoryForm">
  <div formArrayName="accesoryList">
    <!-- 遍历FormArray的控件与后端原始数据 -->
    <div *ngFor="let control of accessoryArray.controls; let i = index">
      <input type="checkbox" [formControlName]="i">
      <label>{{ backendAccessories[i].name }}</label>
    </div>
  </div>
</form>

进阶：绑定配件ID等额外字段 #

如果需要同时提交配件ID与选中状态，可以将FormArray的元素改为FormGroup：

组件类修改

// 初始化FormArray为FormGroup数组
this.accessoryForm = this.fb.group({
  accesoryList: this.fb.array([])
});

// 加载数据时创建FormGroup
res.forEach(item => {
  accessoryArray.push(this.fb.group({
    id: [item.id],
    checked: [item.isChecked]
  }));
});

模板修改

<form [formGroup]="accessoryForm">
  <div formArrayName="accesoryList">
    <div *ngFor="let group of accessoryArray.controls; let i = index" [formGroupName]="i">
      <input type="checkbox" formControlName="checked">
      <label>{{ backendAccessories[i].name }}</label>
      <input type="hidden" formControlName="id">
    </div>
  </div>
</form>

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