Angular &引用；TypeError:control.registerOnChange不是函数；关于将字段表单控件动态更改为FormArray

动态地将被动窗体控件窗体窗体控件更改为窗体阵列

反应型组：

profileForm = this.fb.group({
    name: [''],
    mobile: ['']
});

或

使用formConfig映射呈现profileForm：

formConfigMap = new Map([
  [
    'client',
    [{key: 'name', multi: false}, {key: 'mobile', multi: false}],
  ],
  [
    'customer',
    [{key: 'name', multi: false}, {key: 'mobile', multi: true}],
  ],
]); 

HTML:

每当我将profileForm对象表单“client”更改为“customer”时，都会出现“TypeError:control.registerOnChange不是函数”错误。由于被动表单控件（移动：FormControl->FormArray）中的动态变化

如果我将profileForm对象从“customer”更改为“client”，它工作得非常好（mobile:FormArray->FormControl）

任何建议都会有帮助

---

我尝试了“removeControl（name:string）”方法先删除控件（mobile:FormControl），然后“addControl（name，control）”方法添加控件（mobile as FormArray）。

我真的不喜欢循环中的模板，我建议您可以在我使用*ngTemplateOutlet并将字段和控件作为上下文传递时看到一个更改：

<form *ngIf="profileForm" [formGroup]="profileForm">
    <div *ngFor="let field of formConfigMap.get(key)">
        <div *ngTemplateOutlet="field.multi?arrayControl:singleControl;
                context: {$implicit:field,control:profileForm.get(field.key)}">
        </div>
    </div>
</form>

<ng-template #singleControl let-field let-control="control">
    <div>
        <input type="text" [formControl]="control">
  </div>
</ng-template>
<ng-template #arrayControl let-field  let-control="control">
    <div [formGroup]="control">
        <div *ngFor="let c of control.controls;let i=index">
            <input type="text" [formControl]="c">
        </div>
        </div>
</ng-template>

请参见，要管理数组，我使用[formGroup]并直接使用[formControl]

注意：我将“字段”作为隐式传递

更新奖励，如果我们想要表单组的模板，它可以是

<ng-template #groupControl let-field  let-control="control">
    <div [formGroup]="control">
        <div *ngFor="let c of control.controls|keyvalue;let i=index">
            <input type="text" [formControl]="c.value">
        </div>
     </div>
</ng-template>

---

如果您有被动窗体和被动窗体中的数组控件，请将formControlName更改为formArrayName

组件1.ts：

 this.taskForm = this._formBuilder.group({
  RepeatTypeID: ['', null],
  SelectedWeekDays: new FormArray([]),
});

component.html：

  <mat-checkbox formArrayName="SelectedWeekDays" >{{wdItems.Weekdayname}}</mat-checkbox>

{{wdItems.Weekdayname}

谢谢Eliseo，你救了我一天。

 this.taskForm = this._formBuilder.group({
  RepeatTypeID: ['', null],
  SelectedWeekDays: new FormArray([]),
});

  <mat-checkbox formArrayName="SelectedWeekDays" >{{wdItems.Weekdayname}}</mat-checkbox>