ERROR TypeError: control.registerOnChange is not a function when adding component dynamically

Solution for ERROR TypeError: control.registerOnChange is not a function when adding component dynamically
is Given Below:

Condition
Condition Component: Dynamically Add this component
Rule Component: This one will host Condition Component

Issue

Upon Adding the condition form by clicking Add Condition Button, screen wont render properly. When i inspect the console i got the below error

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)

Attached the below code snippet from html and component.
RuleComponent 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>

Condition HTML and 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 style="color:rgb(246, 95, 95)">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: ['', Validators.required],
      operator: ['', Validators.required],
      value: ''
    });
  }

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

Attached screen