angular2: wie Eingabefelder in Unterkomponenten von Formen an meinem plunkr

Question

Blick zu verwenden: http://plnkr.co/edit/hB34VjxP98uz1iAYS7Dw?p=preview

Der Name ist in myform.form enthalten, aber Name1 der Komponente Innen nicht. Wie schließe ich Name1 in myform ein?

<div class="container"> 
    <div [hidden]="submitted"> 
    <h1>Hero Form</h1> 
<form #heroForm="ngForm"> 
<div class="form-group"> 
    <label for="name">Name</label> 
<input type="text" class="form-control" required 
    [(ngModel)]="modelname" 
name="name" #name="ngModel" > 
    <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> 
    Name is required 
</div> 
<inner></inner> 
</div> 

</form> 
{{heroForm.form.value | json}} 
</div> 

Vorlage von inner.component:

<label for="name">Name1</label> 
<input type="text" class="form-control" required 
    [(ngModel)]="modelname1" 
    name="name1" #name1="ngModel" > 
<div [hidden]="name1.valid || name1.pristine" class="alert alert-danger"> 
Name1 is required 
</div> 

dieses Problem Siehe: https://github.com/angular/angular/issues/9600

Answer 1

Ich habe Ihren Code fixiert Ihr Ende Ziel zu erreichen. Jetzt sind sowohl Name als auch Name1 im Formular enthalten und die Werte erscheinen auf dem Display für Sie

Ich habe eine Gabel aus Ihrem PLNKR erstellt und Ihren Code repariert, um Ihren Anwendungsfall zu unterstützen. Bitte werfen Sie einen Blick: http://plnkr.co/edit/UHkwJ9?p=preview

inner.component.html geändert wird, wie:

<label for="name">Name1</label> 
<input type="text" class="form-control" required 
    [(ngModel)]="modelname1" [formModel]="form" [registerModel]="name2" 
    name="name2" #name2="ngModel" > 
<div [hidden]="name2.valid || name2.pristine" class="alert alert-danger"> 
Name1 is required 
</div> 

Held-form.component.ts geändert wird, wie:

<inner [form]="heroForm"></inner> 

Neue Richtlinie hinzugefügt wird, die Registrieren Sie ein neues Steuerelement in der vorhandenen Formularreferenz:

import { Directive, ElementRef, Input, OnInit } from '@angular/core'; 
import { NgModel, NgForm } from '@angular/forms'; 

@Directive({ 
    selector: '[formModel]' 
}) 
export class FormModelDirective implements OnInit { 

    private el: HTMLInputElement; 

    @Input('formModel') public form: NgForm; 
    @Input('registerModel') public model: NgModel; 

    constructor(el: ElementRef) { 
    this.el = el.nativeElement; 
    } 

    ngOnInit() { 
    if (this.form && this.model) { 
     this.form.form.addControl(this.model.name, this.model.control); 
    } 
    } 

}

Ausgangsbild:

Output of the plnkr code

Referenz: plnkr.co/edit/GG2TVHHHGbAzoOP5mIRr?p=preview