Нет провайдера для ControlContainer, когда дочерний компонент имеет ngModelGroup

Я не могу понять это, он просто не работает.

Это оригинальный 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 и загрузки его внутри отдельной директивы, он больше не будет работать!

Есть несколько закрытых проблем, но не работает.

Это и Это

Ответ 1

Я знаю, это старый вопрос. Но кто-то в будущем может оказаться полезным. У меня была такая же проблема и выглядит так: ошибка появляется, когда компонент имеет тег <form> без директивы formGroup и модуль импортирует ReactiveFormModule. Поэтому, чтобы исправить проблему, убедитесь, что все теги <form> имеют директиву formGroup, если их модуль импортирует ReactiveFormModule.

Ответ 2

Если вы используете шаблонно-управляемые формы и имеете подкомпонент для части формы и (наконец) хотите использовать ngModelGroup в этом подкомпоненте, вам необходимо предоставить ControlContainer для просмотра.

Быстрое решение:

импортировать ControlContainer, NgForm в подкомпонент: import { ControlContainer, NgForm } from '@angular/forms';
добавьте их как viewProviders в подкомпонентный декоратор @Component:

'' '

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

подробности в потрясающей статье от Алексея Зуева: https://medium.com/@a.yurich.zuev/angular-nested-template-driven-form-4a3de2042475

Ответ 3

Быстрый импорт на app.modules.ts

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

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