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({&nbsp;...,&nbsp;viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]})export class ChildComponent {}Stackblitz示例另请阅读这篇文章，解释其为何起作用。Angular：嵌套模板驱动形式更新资料如果您正在寻找嵌套模型驱动的表单，那么这里是类似的方法：@Component({&nbsp; selector: 'my-form-child',&nbsp; template: `<input formControlName="age">`,&nbsp; viewProviders: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; provide: ControlContainer,&nbsp; &nbsp; &nbsp; useExisting: FormGroupDirective&nbsp; &nbsp; }&nbsp; ]})export class ChildComponent {&nbsp; constructor(private parent: FormGroupDirective) {}&nbsp; ngOnInit() {&nbsp; &nbsp; this.parent.form.addControl('age', new FormControl('', Validators.required))&nbsp; }}Ng运行示例更新2如果您不知道确切的ControlContainer包装类型是您的自定义组件（例如，控件位于FormArray指令内），则只需使用通用版本：import { SkipSelf } from '@angular/core';import { ControlContainer} from '@angular/forms';@Component({&nbsp;...,&nbsp;viewProviders: [{&nbsp; &nbsp;provide: ControlContainer,&nbsp; &nbsp;useFactory: (container: ControlContainer) => container,&nbsp; &nbsp;deps: [[new SkipSelf(), ControlContainer]],&nbsp;}]})export class ChildComponent {}

Answer 2

另一个可能的解决方法：@Directive({&nbsp; &nbsp; selector: '[provide-parent-form]',&nbsp; &nbsp; providers: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; provide: ControlContainer,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; useFactory: function (form: NgForm) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return form;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; deps: [NgForm]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]})export class ProvideParentForm {}只需将此指令放在子组件中节点层次结构顶部的某个位置（在任何ngModel之前）。工作原理：NgModel 使用@Host（）限定父窗体的依赖关系查找。因此，父组件中的表单对于子组件中的NgModel不可见。但是我们可以使用上面演示的代码将其注入并提供给子组件。