“ TypeError：control.registerOnChange不是一个函数”，有关将已归档的表单FormControl动态更改为FormArray

Question

动态地将反应形式控件从FormControl更改为FormArray。

活动表单组：

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

OR

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

使用formConfig映射渲染profileForm：

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

HTML：

<form [formGroup]="profileForm">
  <div *ngFor="let field of formConfigMap.get('client' OR 'customer')">
    <div *ngIf="field.multi; else singleControl" formArrayName="mobile">
      <div *ngFor="let control of mobile.controls; let i=index">
        <input type="text" [formControlName]="i">
      </div>
    </div>
    <ng-template #singleControl>
      <input type="text" [formControlName]="field.key">
    </ng-template>
  </div>
</form>

[每当我将profileForm对象形式从'客户'更改为'客户'时，我都会收到“ TypeError：control.registerOnChange不是函数”错误。由于动态更改了反应形式控件Control（mobile：FormControl-> FormArray）。

如果我将profileForm对象从'customer'更改为'client'，则可以正常工作（移动设备：FormArray-> FormControl）。

任何建议都会有所帮助。

我尝试过“ removeControl（名称：字符串）”方法来先删除控件（移动设备：FormControl），然后再使用“ addControl（名称，控件）”方法来添加控件（移动设备为FormArray）。

Answer 1

真的，我不喜欢循环中的模板，我总结了一个可以在this stackblitz中看到的更改，我使用了* 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]

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