Как определить, допустима ли форма дочернего компонента в родительском компоненте при использовании реактивных форм

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". Текущее значение: "ложь

Я попробовал решение для обнаружения изменений, указанное в этом блоге, но оно не помогло.

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

Я ответил на очень похожий ответ, чем этот здесь /questions/442332/angular-2-obrabotka-bolshih-zayavok/49364013#49364013 поэтому я не думаю, что было бы целесообразно предоставлять немного больше кода, чем там.

Пожалуйста, также проверьте демонстрацию, которую я сделал для этого ответа здесь https://stackblitz.com/edit/so-question-angular-2-large-scale-application-forms-handling где вы сможете увидеть нечто подобное как ваша структура

Заметьте часть ошибок? Из родительского компонента вы получите доступ к нему и сможете увидеть, что не так в вашей форме, даже если у вас есть подформы!