Изменение поля на необходимые броски ExpressionChangedAfterCheckedError

Question

Я пытаюсь создать поле, необходимое для нажатия кнопки. Когда я пытаюсь изменить поле на необходимое, я получаю эту ошибку:

core.js:6406 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'disabled': 'false'. Current value: 'true'.

Вот мой код контроллера:

ngOnInit() {
  this.exportTypeForm = new FormGroup({
    exportType: new FormControl('page', Validators.required),
    email: new FormControl('')
  });
}

onExportTypeChange(e: MatRadioChange): void {
  if (e.value === 'list') {
    this.exportTypeForm.controls['email'].setValidators(Validators.required);
    this.exportTypeForm.updateValueAndValidity();
    this.showEmailField = true;
  } else {
    this.exportTypeForm.controls['email'].clearValidators();
    this.exportTypeForm.updateValueAndValidity();
    this.showEmailField = false;
  }
}

и HTML:

<form *ngIf="exportTypeForm" [formGroup]="exportTypeForm">
  <mat-radio-group formControlName="exportType" (change)="onExportTypeChange($event)">
    <mat-radio-button value="page">This page</mat-radio-button>
    <mat-radio-button class="ml-4" value="list">All pages</mat-radio-button>
  </mat-radio-group>
  <mat-form-field appearance="outline" *ngIf="showEmailField" class="mb-4">
    <mat-label>Email Address</mat-label>
    <input matInput formControlName="email" />
    <mat-hint>An email with a link to the excel file will be sent to this address</mat-hint>
  </mat-form-field>
</form>

Я не уверен ни в каком другом способе сделать это. Может кто-нибудь помочь мне найти способ заставить это работать?

Answer 1

Итак, я понял, что это из-за того, как я запускаю логи c по методу updateValueAndValidity(). Я звонил по всей форме, которая не работает. Вам нужно вызвать его на индивидуальный контроль.

Вот рабочий код:

onExportTypeChange(e: MatRadioChange): void {
  if (e.value === 'list') {
    this.exportTypeForm.get('email').setValidators(Validators.required);
    this.exportTypeForm.get('email').updateValueAndValidity();
    this.showEmailField = true;
  } else {
    this.exportTypeForm.get('email').clearValidators();
    this.exportTypeForm.get('email').updateValueAndValidity();
    this.showEmailField = false;
  }
}