Angular2嵌套模板驱动形式

Question

这简直是疯狂，看起来没有办法让其中一种输入形式存在于子组件中。我已经阅读了所有博客和教程以及所有内容，没有办法解决。问题是，当子组件将具有任何形式的形式指令（ngModel，ngModelGroup或任何其他..）时，它将无法工作。这只是模板驱动形式中的一个问题这是个笨蛋：import { Component } from '@angular/core';@Component({  selector: 'child-form-component',  template: `   <fieldset ngModelGroup="address">    <div>      <label>Street:</label>      <input type="text" name="street" ngModel>    </div>    <div>      <label>Zip:</label>      <input type="text" name="zip" ngModel>    </div>    <div>      <label>City:</label>      <input type="text" name="city" ngModel>    </div>  </fieldset>`})export class childFormComponent{}@Component({  selector: 'form-component',  directives:[childFormComponent],  template: `    <form #form="ngForm" (ngSubmit)="submit(form.value)">      <fieldset ngModelGroup="name">        <div>          <label>Firstname:</label>          <input type="text" name="firstname" ngModel>        </div>        <div>          <label>Lastname:</label>          <input type="text" name="lastname" ngModel>        </div>      </fieldset>      <child-form-component></child-form-component>      <button type="submit">Submit</button>    </form>    <pre>      {{form.value | json}}    </pre>    <h4>Submitted</h4>    <pre>          {{value | json }}    </pre>  `})export class FormComponent {  value: any;  submit(form) {    this.value = form;   }}

Answer 1

一个简单的解决方案是提供ControlContainer在viewProviders像你的孩子组成的数组：

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

@Component({

 ...,

 viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]

})

export class ChildComponent {}

Stackblitz示例

另请阅读这篇文章，解释其为何起作用。

Angular：嵌套模板驱动形式

更新资料

如果您正在寻找嵌套模型驱动的表单，那么这里是类似的方法：

@Component({

  selector: 'my-form-child',

  template: `<input formControlName="age">`,

  viewProviders: [

    {

      provide: ControlContainer,

      useExisting: FormGroupDirective

    }

  ]

})

export class ChildComponent {

  constructor(private parent: FormGroupDirective) {}

  ngOnInit() {

    this.parent.form.addControl('age', new FormControl('', Validators.required))

  }

}

Ng运行示例

更新2

如果您不知道确切的ControlContainer包装类型是您的自定义组件（例如，控件位于FormArray指令内），则只需使用通用版本：

import { SkipSelf } from '@angular/core';

import { ControlContainer} from '@angular/forms';

@Component({

 ...,

 viewProviders: [{

   provide: ControlContainer,

   useFactory: (container: ControlContainer) => container,

   deps: [[new SkipSelf(), ControlContainer]],

 }]

})

export class ChildComponent {}

Answer 2

另一个可能的解决方法：

@Directive({

    selector: '[provide-parent-form]',

    providers: [

        {

            provide: ControlContainer,

            useFactory: function (form: NgForm) {

                return form;

            },

            deps: [NgForm]

        }

    ]

})

export class ProvideParentForm {}

只需将此指令放在子组件中节点层次结构顶部的某个位置（在任何ngModel之前）。

工作原理：NgModel 使用@Host（）限定父窗体的依赖关系查找。因此，父组件中的表单对于子组件中的NgModel不可见。但是我们可以使用上面演示的代码将其注入并提供给子组件。