angular 6 "ExpressionChangedAfterItHasBeenCheckedError" react 形式动态表单验证添加和删除

Question

我正在使用 Angular 6 Reactive Form 如果我添加新的验证器动态添加和删除我得到一个错误是

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed
after it was checked. Previous value: 'disabled: false'. Current
value: 'disabled: true'

.ts 文件

Form: FormGroup;
_UserTypes: any[] = [
  { _id: '1', User_Type: 'Sub Admin' },
  { _id: '2', User_Type: 'Manager' },
];
ShowReportsTo: Boolean = false;
constructor() { }
ngOnInit() {
  this.Form = new FormGroup({
    User_Type: new FormControl(null, Validators.required),
    Reports_To: new FormControl(null),
  });
}
UserType_Change() {
  const value = this.Form.controls['User_Type'].value;
  if (typeof value === 'object' && value !== null && value.User_Type !== 'Sub Admin') {
    this.ShowReportsTo = true;
    this.Form.controls['Reports_To'].setValidators([Validators.required]);
    this.Form.updateValueAndValidity();
  } else {
    this.ShowReportsTo = false;
    this.Form.controls['Reports_To'].clearValidators();
    this.Form.controls['Reports_To'].setErrors(null);
    this.Form.controls['Reports_To'].reset();
  }
}

.html 文件

<Form [formGroup]="Form">
  <div class="row">
    <div class="col-sm-6 Form_Select">
      <label>User Type :</label>
      <ng-select formControlName="User_Type (ngModelChange)=" UserType_Change()">
        <ng-option *ngFor="let Type of _UserTypes" [value]="Type">{{Type.User_Type}}</ng-option>
      </ng-select>
    </div>
    <div class="col-sm-6 Form_Select" *ngIf="ShowReportsTo">
      <label>Report To :</label>
      <input type="text" formControlName="Reports_To">
    </div>
  </div>
  <button (click)="submit()" [disabled]="Form.invalid"> Submit </button>
</Form>

如果我删除动态验证器就可以正常工作

此错误不会影响我的流程，但会在控制台中抛出错误

如何处理这个错误

Answer 1

带有 *ngIf 的 div 的内容会导致错误。试试这个:

<ng-container *ngIf="ShowReportsTo">
   <div class="col-sm-6 Form_Select">
     ...
   </div>
</ng-container>