Wie zu bestimmen, ob Kind Komponentenform in übergeordneter Komponente gültig ist, wenn reaktive Formen

Question

mit I Angular 5 mit Reactive Formen

Kinderkomponentenklasse bin mit:

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, 
    }); 
} 

In meiner Eltern Komponentenform Ich habe Tasten , die deaktiviert sind, wenn die oben validators nicht gültig

In der übergeordneten Komponente HTML ist:

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

In der Stammkomponentenklasse:

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

Alles funktioniert gut aber ich die bekannten Fehler

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

ich die Änderungserkennungslösung versucht, in diesem Blog aufgelistet bekommen, aber es hat nicht geholfen.

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

So bin ich fest, es sei denn, wenn ich den Fehler ignorieren, da die App mit dem Fehler gut funktioniert.

Answer 1

ich eine Antwort mache mehrere Lösungen zur Liste:

1 - Versuchen ngOnInit mit ngAfterViewChecked

2 ersetzt - In Ihrem ngOnInit, versuchen, eine setTimeout(() => /* calls */) Hinzufügen, wo Sie Ihre beiden Verfahren setzen in der Anrufe Timeout