angular - 使用反应式表单时如何确定子组件表单在父组件中是否有效

Question

我正在使用带有反应形式的 Angular 5

子组件类：

export class UserEditor implements OnInit {

    public userForm: FormGroup;

...

ngOnInit() {
    this.createFormControls();
    this.createForm();
}
createFormControls() {
    this.userName = new FormControl('', [
        Validators.required,
        Validators.minLength(4)
    ]);
    this.firstName = new FormControl('', Validators.required);
    this.lastName = new FormControl('', Validators.required);
    this.email = new FormControl('', [
      Validators.required,
      Validators.pattern("[^ @]*@[^ @]*")
    ]);

}
createForm() {
 this.userForm = new FormGroup({
      userName: this.userName,
      name: new FormGroup({
        firstName: this.firstName,
        lastName: this.lastName,
      }),
      email: this.email,
    });
}

在我的父组件表单中，如果上述验证器无效，我将禁用按钮

在父组件html中：

<button class="btn btn-sm  btn-primary" (click)="saveUser()" [disabled]="!userListChild?.userForm.valid">

在父组件类中：

export class UserList implements OnInit {
     @ViewChild(UserEditor) userListChild: UserEditor;

一切正常，但是我得到了众所周知的错误

ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：“真”。当前值：'假

我尝试了此博客中列出的更改检测解决方案，但没有帮助。

https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

所以我被卡住了，除非我忽略错误，因为应用程序可以很好地处理错误。

Answer 1

我正在回答列出几个解决方案：

1 - 尝试ngOnInit替换ngAfterViewChecked

2 - 在你的ngOnInit，尝试添加一个setTimeout(() => /* calls */)你把你的两个方法调用都放在超时的地方

Answer 2

如果你使用这个库 https://github.com/cloudnc/ngx-sub-form会更简单

我已经回复了一个与这里的答案非常相似的答案https://stackoverflow.com/a/56375605/2398593所以我认为提供比那里更多的代码没有任何用处。

还请在此处查看我为该答案制作的演示https://stackblitz.com/edit/so-question-angular-2-large-scale-application-forms-handling在那里您将能够看到类似的内容作为你的结构

注意错误部分？即使您有子表单，您也可以从父组件访问它并查看表单中的问题！