Forms angular2：如何在表单的子组件中使用输入字段

看看我的扑克牌：

名称包含在myform.form中，但内部组件的名称1不包含。我如何在我的表单中包含名称1

<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>

英雄形态
名称
名称是必需的
{{heroForm.form.value | json}

内部组件的模板：

<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>

Name1
名称1是必需的

见本期：

---

我已经修复了您的代码，以实现您的最终目标。现在，Name和Name1都包含在表单中，值将显示在屏幕上

我已经从您的plnkr创建了一个fork，并修复了您的代码以支持您的用例。请看一看:

internal.component.html更改为：

<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>

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

}

输出图像：

参考：plnkr.co/edit/gg2twhhhgbaazoop5mirr？p=预览

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