如何解决ERROR TypeError: control.registerOnChange 不是动态添加组件时的函数？

条件
条件组件：动态添加该组件
规则组件：这将承载条件组件
问题

点击添加条件按钮添加条件表单后，屏幕无法正确呈现。当我检查控制台时出现以下错误

easyrules.component.html:95 ERROR TypeError: control.registerOnChange is not a function
at setUpModelChangePipeline (forms.js:2387)
at setUpControl (forms.js:2323)
at FormGroupDirective.addControl (forms.js:5492)
at FormControlName._setUpControl (forms.js:6070)
at FormControlName.ngOnChanges (forms.js:6001)
at checkAndUpdateDirectiveInline (core.js:23630)
at checkAndUpdateNodeInline (core.js:30787)
at checkAndUpdateNode (core.js:30749)
at debugCheckAndUpdateNode (core.js:31376)
at debugCheckDirectivesFn (core.js:31340)

附上来自 html 和组件的以下代码片段。
规则组件 Html：

  <ng-container formArrayName="conditions">
      <app-easyrulecondition *ngFor="let c of _conditionsFormArray?.controls; index as j" 
                          (remove)="removeCondition(j)"
                          [formControlName]="j" 
                          [formlabel]="''Condition '' + (j+1)"
                          [jsonTemplateData]="jsonTemplateData"
                          [isEditMode]="isEditMode">
      </app-easyrulecondition>

条件 HTML 和 TS：

<form [formGroup]="form">
<fieldset>
    <legend>{{formlabel}}</legend>
    <div fxLayout="row" fxLayoutAlign="space-between">
                              <mat-form-field appearance="fill">
                <mat-label>Select</mat-label>
                <mat-select  formControlName="name" (selectionChange)="refreshList($event)" required [disabledControl]="isEditMode">
                  <mat-option *ngFor="let item of templateJsonLevel.data" [value]="item" >{{item}}</mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field appearance="fill">
                <mat-label>Select</mat-label>
                <mat-select  formControlName="property" required [disabledControl]="isEditMode">
                  <mat-option *ngFor="let item of templateJsonLevel2.data" [value]="item" >{{item}}</mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field appearance="fill">
                <mat-label>Opertaor</mat-label>
                <mat-select  formControlName="operator" (selectionChange)="updateValueOnoperatorChange($event)" required [disabledControl]="isEditMode">
                  <mat-option value="eq">EQUAL</mat-option>
                  <mat-option value="in">IN</mat-option>
                </mat-select>
              </mat-form-field>
            <mat-form-field  appearance="fill">
              <input matInput (focusout)="updateValueBasedOnoperatorChange($event)" formControlName="value" maxlength="100" required [disabledControl]="isEditMode"/>
            </mat-form-field>
            <button mat-button color="primary" (click)="remove.emit()" [disabled]="isEditMode">
              <mat-icon>delete</mat-icon></button>
          </div>
    <!-- </div> -->
</fieldset>

export interface EasyruleconditionComponentData {
  name: string;
  property: string;
  operator: string;
  value: string;
}


export class EasyruleconditionComponent implements ControlValueAccessor,OnDestroy,OnInit,AfterViewInit {
  @input()
  formlabel: string | number = ''Condition'';

  @Output()
  remove: EventEmitter<void> = new EventEmitter<void>();

  form: FormGroup;
  @input()
  jsonTemplateData: any;
  @input()
  isEditMode: boolean;
  private _onChange: (
    value: EasyruleconditionComponentData | null | undefined
  ) => void;

  private _destroy$: Subject<void> = new Subject<void>();
  templateJsonLevel = { data: [] };
  templateJsonLevel2 = { data: [] };
  temp: Observable<any[]> = new Observable<any[]>();
  constructor(private _fb: FormBuilder,private apiService: ApiService,private cdr: ChangeDetectorRef) { }

  ngOnInit(): void {

    this._createFormGroup();
    this._setupObservables();

  }

  ngAfterViewInit(): void {
    this.cdr.detectChanges();
  }

  ngOnDestroy(): void {
    if (this._destroy$ && !this._destroy$.closed) {
      this._destroy$.next();
      this._destroy$.complete();
    }
  }

  writeValue(value: EasyruleconditionComponentData): void {
    if (!value) {
      return;
    }
    this.form.patchValue(value);
  }
  
  registerOnChange(
    fn: (v: EasyruleconditionComponentData | null | undefined) => void
  ): void {
    this._onChange = fn;
  }
  registerOnTouched(fn: any): void {
    // Todo: implement this method
    // throw new Error(''registerOnTouched not implemented'');
  }

  setdisabledState(isdisabled: boolean): void {
    // Todo: implement this method
    // throw new Error(''setdisabledState not implemented'');
  }

  private _createFormGroup(): void {
    this.form = this._fb.group({
      name: ['''',Validators.required],property: ['''',operator: ['''',value: ''''
    });
  }

  private _setupObservables(): void {
    this.form.valueChanges.pipe(takeuntil(this._destroy$)).subscribe(value => {
      if (this._onChange) {
        this._onChange(value);
      }
    });
  }
}

Attached screen

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）