Выражение изменилось после того, как оно было проверено.Предыдущее значение: 'ng-valid: true'.Текущее значение: 'ng-valid: false'

Question

У меня есть угловая реактивная форма в родительском компоненте и разделы внутри дочернего компонента.

Внутри дочернего компонента у меня есть флажок - когда он отмечен - открываются дополнительные поля, и я хочу, чтобы все они были обязательными.

Я использую setValidators, но получаю ошибку

ParentFormComponent.html: 3 Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки.Предыдущее значение: 'ng-valid: true'.Текущее значение: «ng-valid: false».в viewDebugError (core.js: 7601) в expressionChangedAfterItHasBeenCheckedError (core.js: 7589) в checkBindingNoChanges (core.js: 7691) в checkNoChangesNodeInline (core.js: 10560) в checkNoChangesNoNCNHOCNHOCNHOCNHOCNEHECNHOCNECHEHODjs: 11144) в debugCheckRenderNodeFn (core.js: 11098) в Object.eval [как updateRenderer] (ParentFormComponent.html: 3) в Object.debugUpdateRenderer [как updateRenderer] (core.js: 11087) в checkNoChanges:10442)

ParentFormComponent.html: 3 КОНТЕКСТ ОШИБКИ DebugContext_ {view: Object, nodeIndex: 2, nodeDef: Object, elDef: Object, elView: Object}

это строкаof ParentFormComponent.html: 3

 <form [formGroup]="parentForm" (ngSubmit)="submitForm()">

Вот мой код:

<label class="container">DB
    <input #db type="checkbox" name="db" (change)="checkValue(db.name, db.checked)"> 
    <span class="checkmark"></span>
</label>

<div *ngIf="db.checked" formGroupName="_monitorDB">
    <mat-form-field>
        <input matInput placeholder="Server name" formControlName="ServerName">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="DataBase name" formControlName="DbName">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="table name" formControlName="DB_tableName">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="port" formControlName="DbPort">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="Query" formControlName="Query">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="Permissions" formControlName="Premissions">
    </mat-form-field>

</div>

и в файле ts:

checkValue(name:string, event: any){
    if (event == true){
      this.test.push(name);
      if (name =="db"){
         this.childForm.get('_monitorDB').get('ServerName').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('DbName').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('DB_tableName').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('DbPort').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('Query').setValidators([Validators.required]);
         this.childForm.get('_monitorDB').get('Premissions').setValidators([Validators.required]);

      }

    }

    else{
      const index: number = this.test.indexOf(name);
      if (index !== -1) {
          this.test.splice(index, 1);
          if (name =="db"){
            this.childForm.get('_monitorDB').get('ServerName').clearValidators();
            this.childForm.get('_monitorDB').get('ServerName').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('DbName').clearValidators();
            this.childForm.get('_monitorDB').get('DbName').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('DB_tableName').clearValidators();
            this.childForm.get('_monitorDB').get('DB_tableName').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('DbPort').clearValidators();
            this.childForm.get('_monitorDB').get('DbPort').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('Query').clearValidators();
            this.childForm.get('_monitorDB').get('Query').updateValueAndValidity();
            this.childForm.get('_monitorDB').get('Premissions').clearValidators();
            this.childForm.get('_monitorDB').get('Premissions').updateValueAndValidity();
          }
      }      
    }

     this.checkboxArr.emit(this.test);
 }

Answer 1

Я не знаю, правильно ли это делать, но я решил это, изменив:

<div *ngIf="db.checked" formGroupName="_monitorDB">

на

<div [hidden]="!db.checked" formGroupName="_monitorDB">