Angular2-Vorlage getrieben Subformular-Komponente mit Validierung

Question

Ich habe eine Vorlage getriebene Form, die eine Gruppe von Eingängen enthält in einem ngFor enthält.

Ich versuche, die 'Untergruppe' zu trennen, die in seine eigene Kindkomponente wiederholt, aber ich habe Probleme, die Eltern ngForm enthalten die Validierung in der Kindkomponente enthalten. Hier

ist eine vereinfachte Version von dem, was ich rede:

Eltern Vorlage:

<form #parentForm="ngForm"> 
    <input name="firstName" ngModel required> 
    <input name="lastName" ngModel required> 

    <child-component *ngFor="let child of children;"></child-component> 
</form> 

Kinder Vorlage:

<div> 
    <input name="foo" required ngModel> 
    <input name="bar" required ngModel> 
</div> 

Ich bin nicht in der Lage zu haben Das übergeordnete Formular wird auf die required der untergeordneten Eingaben abholen. Ich habe versucht, das Kind in seiner eigenen Form aufweist und das Bestehen die #parentForm Instanz mit dem Kind durch, und das Kind Anruf mit:

this.parentForm.addFormGroup(this.childForm.form)

aber dies immer noch nicht funktioniert.

Ich habe auch Kind tut dies die umgekehrte Art und Weise, wo die Eltern die ContentChildren der Unterformulare und fügt jedes zum Formular, aber immer noch die Validierung funktioniert nicht.

Ich weiß, ich könnte die Subkomponente implementieren ControlValueAccessor aber dann müsste ich einen benutzerdefinierten Validator implementieren, die ich lieber nicht tun würde, da keine der Validierung tatsächlich neu ist, es ist nur required 's.

Bitte helfen Sie mir herauszufinden, warum ich kein Unterformular zum Eltern hinzufügen kann und es die Validierungen des Kindes verwenden.

Answer 1

Eine mögliche Lösung könnte zusätzlich Kontrollen von Kind-Komponente übergeordnetes Formular wie folgt:

child.component.ts

@Component({ 
    selector: 'child-component', 
    template: ` 
    <div> 
    <input name="foo" required ngModel> 
    <input name="bar" required ngModel> 
    </div> 
    ` 
}) 
export class ChildComponent { 
    @ViewChildren(NgModel) controls: QueryList<NgModel>; 

    constructor(private parentForm: NgForm) { } 

    ngAfterViewInit() { 
    this.controls.forEach((control: NgModel) => { 
     this.parentForm.addControl(control); 
    }); 
    } 
} 

Plunker Example

Answer 2

können Sie verwenden Eigenschaft verbindlich und @Input für Ihr Problem, das

sieht aus, als

<form #parentForm="ngForm"> 
    <input name="firstName" ngModel required> 
    <input name="lastName" ngModel required> 

    <child-component #parentForm.childForm="ngForm" [children]="children"></child-component> 
</form> 

In Ihrem

1. eine Eingangsvariable deklarieren als

   @Input() children:any[]=[]; 
   

2. die Vorlage ändern wie unten

   <div *ngFor="let child of children;"> 
       <input name="foo" required [(ngModel)]="child.foo"/> 
   </div>