當子組件具有ngModelGroup時，沒有ControlContainer的提供者

Question

我似乎無法弄清楚這一點，它根本就不起作用。

這是由Pascal Prekht編寫的原始plunker ，它是模板驅動形式的解釋：

這是我的fork是完全相同的東西，除了我試圖加載其中一個字段集作為一個單獨的子組件。

這是代碼：

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


}

因此，在切割其中一個feildset並將其加載到單獨的指令中之后，它將不再起作用！

有幾個封閉的問題，但沒有它們正在發揮作用。

這個和這個

Answer 1

我知道這是一個老問題。 但是將來有人會發現它很有用。 我有同樣的問題，看起來當組件有一個沒有formGroup指令的<form>標簽並且模塊正在導入ReactiveFormModule 。 因此，要解決此問題，請確保所有<form>標記都具有formGroup指令（如果其模塊正在導入ReactiveFormModule 。

Answer 2

如果您正在使用模板驅動的表單 ，並且具有表單的一部分的子組件 ，並且（最終）想要在該子組件中使用ngModelGroup ，則需要向視圖提供ControlContainer 。

快速解決方案

• 導入ControlContainer, NgForm子組件中的import { ControlContainer, NgForm } from '@angular/forms';
• 將它們添加為子組件@Component裝飾器中的viewProviders ：

```

@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

Answer 3

在app.modules.ts上快速導入

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

@NgModule({
imports: [
ReactiveFormsModule],})