2016-05-31 1 views
11

Это моя форма:Angular2 Нет поставщик для ControlContainer при построении простой форме

app.component:

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

app.component класс:

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 вводятся на верхнем уровне приложения, я сделал точно все, что соответствует их руководствам.

EDIT: Пробовал добавлять FORM_DIRECTIVES к ребенку или к app.component, без успеха.

ответ

8

Вы можете использовать директиву 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 требуется тег формы в шаблоне для детей

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

+0

Спасибо, это устранило проблему, но не могли бы вы объяснить, что это действительно проблема здесь? –

+0

ngControl требуется тег родительской формы в шаблоне (Child -> template) – yurzui

+0

не совсем понял, почему это исправляет его. – FlavorScape