在反应式表单上设置错误时不会运行更改检测

Question

我在 Angular 7 上，我正在为我的一种形式使用反应形式，代码如下。 (StackblitzHere)

模板

 <form [formGroup]="SignupForm" *ngIf="SignupForm">
   <input type="text" class="form-control" id="username" formControlName = "username">
   <div *ngIf="SignupForm.errors?.errors">Error</div>
 </form>

打字稿

export class AppComponent implements OnInit {
  SignupForm: FormGroup;

  constructor() {

  }

  ngOnInit() {
    setTimeout(() => {
      this.SignupForm = new FormGroup({
        'username': new FormControl('Value'),
        'email': new FormControl()
      });
      this.SignupForm.setErrors({errors: 'Error'});
    })
  }
}

如您所见，我试图在表单初始化后立即设置错误（在我的实际情况下，我会根据后端数据进行一些验证，然后执行此操作。）。但即使 SignupForm.errors 设置了错误对象，错误似乎也没有出现。

但如果我这样做了

setTimeout(() => { this.SignupForm.setErrors({errors: 'Error'});}) 

一切正常。我做错了什么还是我可以报告的角度错误。请帮忙。谢谢。

注意

实际上，我的表单来自异步的后端。在我从元数据创建表单后，我进行验证并设置错误。所以移动到任何生命周期钩子都不会改变我认为的任何行为。

Answer 1

请您在 ngAfterViewInit

上写 setErrors

这是一个例子 TS

export class AppComponent implements OnInit {
SignupForm: FormGroup;

constructor() {
}

ngOnInit() {
   this.SignupForm = new FormGroup({
     'username': new FormControl('Value'),
    'email': new FormControl()
  });
}

ngAfterViewInit(){
     this.SignupForm.setErrors({errors: 'Error'});
}

让我知道它是否有效。