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：表达式在检查后发生了变化。上一个值：'true'。当前值：'false

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

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上查看我为该答案所做的演示，您将在其中看到与您的结构类似的东西

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

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

2 个答案: