ExpressionChangedAfterItHasBeenCheckedError从父级更新子窗体的验证器

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  updateValidators() {
    // 更新验证器的逻辑
    this.cdr.detectChanges(); // 手动触发变更检测
  }
}

updateValidators() {
  setTimeout(() => {
    // 更新验证器的逻辑
  }, 0);
}

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnChanges {
  @Input() validators: any[];

  ngOnChanges() {
    // 更新验证器的逻辑
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child [validators]="validators"></app-child>`
})
export class ParentComponent {
  validators = [];

  updateValidators() {
    this.validators = [/* 新的验证器 */];
  }
}

import { Component, Input, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<form [formGroup]="form"></form>`
})
export class ChildComponent {
  @Input() validators = [];
  form = this.fb.group({ /* 表单控件 */ });

  constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {}

  ngOnChanges() {
    // 更新验证器的逻辑
    this.form.setValidators(this.validators);
    this.cdr.detectChanges(); // 手动触发变更检测
  }
}