Angular：尝试禁用按钮时出现 ExpressionChangedAfterItHasBeenCheckedError

Question

I use mat-dialog to edit details of my profile page. I'm getting an ExpressionChangedAfterItHasBeenCheckedError when I click the 'Edit age' button and the dialog window pops up.

I decided to extract the styling of all edit dialogs into a single edit.component:

edit.component.html

<div class="navigation-control">
  <mat-icon (click)="onCancelButtonClicked()"
            class="close-button">close</mat-icon>
</div>

<div class="content-main">
  <ng-content select=".content-main"></ng-content>
</div>

<div class="content-bot">
  <button mat-raised-button
          (click)="onCancelButtonClicked()">Cancel</button>

  <button mat-raised-button
          (click)="onActionButtonClicked()"
          [lnDisableButton]="actionButtonDisabled">{{actionButtonValue}}</button>
</div>

edit.component.ts

@Component({ selector: 'ln-edit', ... })
export class EditComponent {
  @Input() actionButtonValue: string;
  @Input() actionButtonDisabled: boolean;
  @Output() cancelButtonClicked = new EventEmitter<void>();
  @Output() actionButtonClicked = new EventEmitter<void>();

  onCancelButtonClicked() {
    this.cancelButtonClicked.emit();
  }

  onActionButtonClicked() {
    this.actionButtonClicked.emit();
  }
}

To avoid the ExpressionChangedAfterItHasBeenCheckedError when trying to disable buttons and controls, I used this snippet. But that didn't solve this issue.

disable-button.directive.ts

@Directive({ selector: '[lnDisableButton]' })
export class DisableButtonDirective {
  @Input('lnDisableButton') isDisabled = false;

  @HostBinding('attr.disabled')
  get disabled() { return this.isDisabled; }
}

The following is the contents of a mat-dialog window. This gets instantiated when I click the 'Edit age' button. When I remove the [actionButtonDisabled]="actionButtonDisabled", the error goes away, but obivously I need that line to make the functionality disable the button.

age-edit.component.html

<ln-edit [actionButtonValue]="actionButtonValue"
         [actionButtonDisabled]="actionButtonDisabled"
         (cancelButtonClicked)="onCancelButtonClicked()"
         (actionButtonClicked)="onActionButtonClicked()">
  <form [formGroup]="ageForm"
        class="content-main">
    <ln-datepicker formControlName="birthday"
                   [appearance]="'standard'"
                   [label]="'Birthday'"
                   class="form-field">
    </ln-datepicker>
  </form>
</ln-edit>

I handle the disabling/enabling the button in the 'ts' part of the mat-dialog popup.

age-edit.component.ts

@Component({ selector: 'ln-age-edit', ... })
export class AgeEditComponent implements OnInit, OnDestroy {
  ageForm: FormGroup;
  private initialFormValue: any;
  actionButtonDisabled = true;
  private unsubscribe = new Subject<void>();

  constructor(
    private editPhotoDialogRef: MatDialogRef<AgeEditComponent>,
    private fb: FormBuilder,
    @Inject(MAT_DIALOG_DATA) public dialogData: Date) { }

  ngOnInit() {
    this.initializeAgeForm();
    this.loadDataToAgeForm(this.dialogData);
    this.trackFormDistinct();
  }

  private initializeAgeForm(): void {
    this.ageForm = this.fb.group({
      birthday: null,
    });
  }

  loadDataToAgeForm(birthday: Date | null): void {
    if (!birthday) { return; }

    this.ageForm.setValue({ birthday });
    this.initialFormValue = this.ageForm.value;
  }

  get birthdayAC() { return this.ageForm.get('birthday') as AbstractControl; }

  get actionButtonValue(): string {
    return this.birthdayAC.value ? 'Update age' : 'Add age';
  }

  onCancelButtonClicked(): void {
    this.editPhotoDialogRef.close();
  }

  onActionButtonClicked(): void {
    this.editPhotoDialogRef.close({ ... });
  }

  trackFormDistinct(): void {
    this.ageForm.valueChanges.pipe(
      distinctUntilChanged(), // TODO: needed?
      takeUntil(this.unsubscribe)
    ).subscribe(val => {

      (this.formValueNotDistinct(this.ageForm.value, this.initialFormValue)
        || this.birthdayAC.value === null)
        ? this.actionButtonDisabled = true
        : this.actionButtonDisabled = false;
    });
  }

  ngOnDestroy() { ... }
}

I suspect this has something to do with content projection, but I'm not sure. (...or perhaps with my custom 'ln-datepicker'?)
Any ideas?
Thanks.

Answer 1

From what I can tell, the problem resides in trackFormDistinct() method:

trackFormDistinct(): void {
  this.ageForm.valueChanges.pipe(
    distinctUntilChanged(), // TODO: needed?
    takeUntil(this.unsubscribe)
  ).subscribe(val => {

    (this.formValueNotDistinct(this.ageForm.value, this.initialFormValue)
      || this.birthdayAC.value === null)
      ? this.actionButtonDisabled = true
      : this.actionButtonDisabled = false;
  });
}

Looks like because of this.ageForm.valueChanges , will have different values in the 2 change detection cycles. I think this.ageForm.valueChanges emits due to <ln-datepicker> .

In a tree of form controls , if one node calls setValue , all its ancestors will have to be updated. I've written more about how Angular Forms work in this article .

I'm thinking of 2 alternatives:

• skip the first emission of ageForm since it indicates the initialization of the form control tree, so this is irrelevant to the logic inside subscribe 's callback.

this.ageForm.valueChanges.pipe(
  skip(1),
  distinctUntilChanged(), // TODO: needed?
  takeUntil(this.unsubscribe)
).subscribe(/* .... */)

• initialize actionButtonDisabled with false , since the error complains that it switched from true to false

actionButtonDisabled = false;