Angular2 Отсутствует поставщик ControlContainer при построении простой формы

Это моя форма:

app.component.html

<form [ngFormModel]="myForm">
    <my-child-component></my-child-component>
</form>

app.component.ts

constructor ( private _formBuilder : FormBuilder ) {
    this.myForm = _formBuilder.group( {
        firstName : ["",Validators.required]
    } );
}

мой потомок-компонент:

 <input type="text" ngControl="firstName">

Ошибка:

   No provider for ControlContainer 
   [ERROR ->]<md-input
            ngControl="firstName"
            placeholder="First name">

Если я перемещу вход внутри самого компонента приложения, он будет работать, но мой вход находится в дочернем компоненте.

FORM_DIRECTIVES и FORM_PROVIDERS вводятся на верхнем уровне приложения. Я сделал все, что было в их руководствах.

Я также попытался добавить FORM_DIRECTIVES к ребенку или к app.component без успеха.

Ответы

Ответ 1

Вы можете использовать ngFormControl директиву вместо ngControl и просто передать переменную управления в детской Input, как это:

<form [ngFormModel]="myForm">
  <my-child-component [control]="myForm.controls.firstName"></my-child-component>
</form>

Child.component

@Component({
  selector: 'my-child-component',
  template: '
    <input type="text" [ngFormControl]="control">  
  ',
  directives: [FORM_DIRECTIVES]
})
export class Child {
  @Input() control: Control;
}

См. Также plunkr https://plnkr.co/edit/ydRAOmFG6FU6lxTonWzj?p=preview

Директива NgControl - это тег формы формы в шаблоне Child

Смотрите также