2016-06-13 22 views
0

Jede Möglichkeit, verschachtelte Felder in Angular2 zu unterstützen.Angular2 unterstützt verschachtelte Eigenschaften im Formular nicht

Klasse

ngOnInit() { 
this.form = this._fb.group({ 

    name: { 
    given: ['', Validators.required], 
    middle: [''], 
    family: ['', Validators.required] 
    } 

}); 
} 

Vorlage

<form [ngFormModel]="form"> 

<input ngControl="name.given" type="text" placeholder="First Name"> 
<input ngControl="name.middle" type="text" placeholder="Middle Name"> 
<input ngControl="name.family" type="text" placeholder="Last Name"> 

</form> 

Ich bin immer in der Konsole folgende Cannot find control 'name.given' Fehler ausgegeben. Ich habe eine andere Syntax name['given'], name[given] usw. gegen ngControl versucht, aber die gleiche Art des Fehlers erhalten.

Wie arbeiten Sie mit geschachtelten Feldern in angular2?

+0

Und [hier] (https://angular.io/docs/ts/latest/api/common/index/FormBuilder-class.html) ist die Antwort. – Lekhnath

Antwort

2

Sie fixieren Inline-Form (mit ngControl) und programmatischer Form mit FormBuilder - in diesem Fall müssen Sie ngFormControl) verwenden.

Ich denke, dass Sie nach Formulargruppen suchen. Hier ist ein Beispiel:

<div ngControlGroup="name" #cgName="ngForm"> 
    <p>First: <input ngControl="give" required></p> 
    <p>Middle: <input ngControl="middle"></p> 
    <p>Last: <input ngControl="family" required></p> 
</div> 

dieses plunkr Siehe: https://plnkr.co/edit/M4FGTNAx8lo8jzBivH0P?p=preview.

+0

Jetzt bekomme ich 'Kann nicht finden 'Name -> gegeben' 'Fehlermeldung in der Konsole. – Lekhnath

+0

Vielleicht haben Sie das 'form' Element vergessen. Ich habe eine Plunkr in meiner Antwort hinzugefügt ;-) –

+0

Es funktioniert nicht mit [ngFormModel] [hier] (https://plnkr.co/edit/YZwO4PXwvqnMsAfsJ6oY?p=preview) – Lekhnath

Verwandte Themen