Angular 2 verschachtelte Formulare mit Kind Komponenten und Validierung

Question

Ich versuche, eine geschachtelte Form mit Validierung in Angular 2 zu erreichen, habe ich Beiträge gesehen und folgte der Dokumentation, aber ich bin wirklich kämpfen, hoffe, Sie können mich auf der rechten Seite zeigen Richtung.

Was ich versuche zu erreichen, ist eine validierte Form mit mehreren Kinderkomponenten. Diese Kinderkomponenten sind ein bisschen komplex, einige von ihnen haben mehr Kinderkomponenten, aber um der Frage willen können wir das Problem mit einem Elternteil und einem Kind angehen.

Was bin ich

Nachdem eine Form zu erreichen versuchen, die wie folgt funktioniert:

<div [formGroup]="userForm" novalidate> 
    <div> 
     <label>User Id</label> 
     <input formControlName="userId"> 
    </div> 
    <div> 
     <label>Dummy</label> 
     <input formControlName="dummyInput"> 
    </div> 
</div> 

Dies erfordert eine Klasse wie folgt mit:

private userForm: FormGroup; 
constructor(private fb: FormBuilder){ 
    this.createForm(); 
} 
private createForm(): void{ 
    this.userForm = this.fb.group({ 
     userId: ["", Validators.required], 
     dummyInput: "", Validators.required] 
    }); 
} 

Dies funktioniert wie erwartet Aber jetzt möchte ich den Code entkoppeln und die "dummyInput" -Funktionalität in eine separate, andere Komponente einfügen. Hier bin ich verloren. Das ist, was ich versuchte, ich glaube, ich bin nicht weit von der Antwort zu bekommen, aber ich bin wirklich die Ideen aus, ich bin ziemlich neu in die Szene:

parent.component.html

<div [formGroup]="userForm" novalidate> 
    <div> 
     <label>User Id</label> 
     <input formControlName="userId"> 
    </div> 
    <div> 
     <dummy></dummy> 
    </div> 
</div> 

parent.component.ts

private createForm(): void{ 
    this.userForm = this.fb.group({ 
    userId: ["", Validators.required], 
    dummy: this.fb.group({ 
     dummyInput: ["", Validators.required] 
    }) 
}); 

children.component.html

children.component.ts

private dummyGroup: FormGroup; 

Ich weiß etwas nicht stimmt mit dem Code ist, aber ich bin wirklich in eine Straßensperre. Jede Hilfe würde geschätzt werden.

Danke.

Answer 1

Ich werde nicht lügen, weiß nicht, wie ich diesen Beitrag nicht früher gefunden habe.

Angular 2: Form containing child component

Die Lösung ist, die Kinder-Komponente auf den gleichen formGroup zu binden, indem das formGroup von dem übergeordneten an die Kinder als einen Eingang übergeben.

Wenn jemand ein Stück Code teilt, um das Problem auf andere Weise zu lösen, werde ich es gerne annehmen.

Answer 2

Sie eine Eingabe in Ihren Kindern Komponente hinzufügen können, die FormGroup zu it.and passieren FormGroupName verwenden Sie den Namen Ihres FormGroup :)

children.component.ts

@Input('group'); 
private dummyGroup: FormGroup; 

passieren parent.component.html

<div [formGroup]="userForm" novalidate> 
    <div> 
     <label>User Id</label> 
     <input formControlName="userId"> 
    </div> 
    <div formGroupName="dummy"> 
     <dummy [group]="userForm.controls['dummy']"></dummy> 
    </div> 
</div>