当子组件具有ngModelGroup时,没有ControlContainer的提供者

Question

我似乎无法弄清楚这一点,它根本就不起作用.

这是由Pascal Prekht编写的原始plunker,它是模板驱动形式的解释:

而这里是我的叉子是完全一样的东西,但我试图加载字段集作为一个独立的子组件之一.

这是代码:

@Component({
  selector:'form-group-component',
  template:`
    <fieldset ngModelGroup="anotherAddress">
      <div>
        <label>Street2:</label>
        <input type="text" name="street2" ngModel>
      </div>

    </fieldset>

  `
})
export class FormGroupComponent{

}

@Component({
  selector: 'form-component',
  directives:[FormGroupComponent],
  template: `
    <form #form="ngForm">

      <form-group-component></form-group-component>  

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

    </form>
  `
})
export class FormComponent {


}

因此,在切割其中一个feildsets并将其加载到单独的指令中之后,它将不再起作用!

有几个封闭的问题,但没有它们正在发挥作用.

这个 和这个

Answer 1

我知道这是一个老问题.但是将来有人会发现它很有用.我有同样的问题,看起来当组件有一个<form>没有formGroup指令的标签并且模块正在导入 时出现错误ReactiveFormModule.因此,要修复此问题,请确保所有<form>标记都有formGroup指令(如果其模块正在导入)ReactiveFormModule.

Answer 2

如果您使用的是模板驱动的表单，并且该表单的一部分包含一个子组件，并且（最后）想要在该子组件中使用ngModelGroup，则需要向视图提供ControlContainer。

快速解决方案：

• 导入ControlContainer, NgForm子组件： import { ControlContainer, NgForm } from '@angular/forms';
• 添加这些如viewProviders在子组件@Component装饰：

```

@Component({
  selector: 'sub-question',
  templateUrl: '...',
  styleUrls: ['...'],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})

• Alexey Zuev的一篇很棒的文章中提供了详细信息：https : //medium.com/@a.yurich.zuev/angular-nested-template-driven-form-4a3de2042475