表格形式.可以继承表单控件吗？

Question

我有两个组件:ParentComponent和ChildComponent:

parent.component.ts

<form #form="ngForm" (ngSubmit)="onSubmit(form)" novalidate>
     <input type="text" name="firstControl" [(ngModel)]="firstControl" />
     <input type="text" name="secondControl" [(ngModel)]="secondControl" />
     <child-component>
</form>
{{form.value | json}}

child.component.ts

<input type="text" name="thirdControl" [(ngModel)]="thirdControl" />
<input type="text" name="fourthControl" [(ngModel)]="fourthControl" />

现在,{{form.value | json}}回归{ "firstControl": "", "secondControl": "" }并且很清楚.我的问题是:有没有办法从子组件形成enherit表单控件？获取{ "firstControl": "", "secondControl": "", "thirdControl": "", "fourthControl": "" }ParentComponent 的正确方法是什么？可能吗？

Answer 1

更新:

确实有一种更简单的方法:

import { FormsModule, ControlContainer, NgForm, NgModel } from '@angular/forms';

@Component({
  ...
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class ChildComponent {}

也可以看看

• Angular2嵌套模板驱动表单

以前的版本:

我会说这是可能的.例如,您可以将以下代码添加到您的

child.component.ts

import { NgForm, NgModel } from '@angular/forms';

@Component({
  selector: 'child-component',
  template: `
      <input type="text" name="thirdControl" [(ngModel)]="thirdControl" />
      <input type="text" name="fourthControl" [(ngModel)]="fourthControl" />
    `
})
export class ChildComponent {
  @ViewChildren(NgModel) ngModels: QueryList<NgModel>;

  constructor(@Optional() private ngForm: NgForm) {}

  ngAfterViewInit() {
    if (this.ngForm) {
      this.ngModels.forEach(model => this.ngForm.addControl(model));
    }
  }
}

Plunker示例

Angular DI系统使我们有机会获得对父NgForm实例的引用,因为角度依赖性解析算法从当前节点开始并通过元素树向上.在我的例子中,我们可以想象出这棵树

              @NgModule providers
                    |
                  my-app
                    |
                   form
          /         |       \
   input[text] input[text] child-component

因此,当我们要求NgForm令牌角度时,将按下一个顺序搜索它

child-component
     ||
     \/
    form
     ||
     \/
   my-app
     ||
     \/
  @NgModule

在表单元素NgForm指令放置,所以什么时候可以得到它.我们还可以获取NgForm在providers数组中的指令上声明的任何标记.此规则适用于任何节点.

另请参阅Angular 2 - ng-bootstrap如何为其NgbRadio指令提供NgbRadioGroup和NgbButtonLabel？

然后我只是NgModel手动添加子指令,NgForm所以他们应该一起工作.