2016-05-31 8 views
11

Das ist meine Form ist:Angular2 Kein Anbieter für Control, wenn eine einfache Form Gebäude

app.component:

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

app.component Klasse:

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

my-Kind-Komponente :

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

Fehler:

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

Wenn ich die Eingabe innerhalb der App-Komponente selbst verschiebe, wird es funktionieren, aber meine Eingabe ist in einer untergeordneten Komponente.

FORM_DIRECTIVES und FORM_PROVIDERS werden auf der obersten App-Ebene injiziert, ich habe genau alles nach ihren Anleitungen getan.

EDIT: versucht, FORM_DIRECTIVES zu dem Kind oder zu app.component, kein Erfolg.

Antwort

8

können Sie ngFormControl Direktive statt ngControl verwenden und nur Kind Regelgröße in Input wie dies passieren:

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

Siehe auch plunkr https://plnkr.co/edit/ydRAOmFG6FU6lxTonWzj?p=preview

NgControl Richtlinie ist erforderlich Formular-Tag in Child Vorlage

Siehe auch

+0

Danke, das das Problem behoben, aber können Sie mir bitte erklären, was hier wirklich das Problem ist? –

+0

ngControl ist ein übergeordnetes Formular-Tag innerhalb der Vorlage erforderlich (Kind -> Vorlage) – yurzui

+0

nicht ganz verstehen, warum dies behebt es. – FlavorScape