形式形式.表单控件可以继承吗? [英] Form in form. Can there be inheritance of form controls?

问题描述

我有两个组件:ParentComponent和ChildComponent:

I have two components: ParentComponent and 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": "" }，这很清楚.我的问题是:有没有一种方法可以从子组件中形成继承的窗体控件?为ParentComponent获取{ "firstControl": "", "secondControl": "", "thirdControl": "", "fourthControl": "" }的正确方法是什么?是否有可能?

Now, {{form.value | json}} returns { "firstControl": "", "secondControl": "" } and it's clear. My question is: Is there a way to form enherit form controls from child component? What is the correct way to get { "firstControl": "", "secondControl": "", "thirdControl": "", "fourthControl": "" } for ParentComponent? Is it possible?

推荐答案

更新:

实际上，有一种更简单的方法:

Indeed there is an easier way:

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

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

另请参见

• Angular2嵌套模板驱动的表单

以前的版本:

我会说有可能.例如，您可以将以下代码添加到您的

I would say it's possible. For example you could add the following code to your

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 Example

角度DI系统使我们有机会获得对父NgForm实例的引用，因为角度依赖性解析算法从当前节点开始并遍历元素树.在我的示例中，我们可以想象下面的树

Angular DI system gives us the opportunity to get reference to parent NgForm instance because angular dependency resolution algorithm starts with current node and goes up through tree of elements. In my example we can imagine the follwing tree

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

因此，当我们需要NgForm令牌标记时，它将按下一个顺序搜索

So when we are requiring NgForm token angular will search it in the next order

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

在表单元素上放置了NgForm指令，以便何时可以获取它.此外，我们还可以获取在providers数组中的NgForm指令上声明的所有令牌.此规则适用于任何节点.

On form element NgForm directive is placed so when can get it. Also we can get any token that was declared on NgForm directive within providers array. And this rule applies to any node.

另请参见角度2- ng-bootstrap如何为NgbRadio指令提供NgbRadioGroup和NgbButtonLabel?

然后我只是将子NgModel子指令手动添加到NgForm，因此它们应该一起工作.

Then i just added child NgModel directives manually to NgForm so they should work together.

这篇关于形式形式.表单控件可以继承吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！