web-dev-qa-db-fra.com

Angular2 Aucun fournisseur pour ControlContainer lors de la création d'un formulaire simple

Ceci est ma forme: 

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

mon composant enfant: 

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

Erreur: 

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

Si je déplace l'entrée dans le composant d'application lui-même, cela fonctionnera, mais mon entrée se trouve dans un composant enfant.

FORM_DIRECTIVES et FORM_PROVIDERS sont injectés au niveau supérieur de l'application. J'ai tout fait exactement selon leurs guides.

J'ai également essayé d'ajouter FORM_DIRECTIVES à l'enfant ou à app.component sans succès.

angularangular2-forms
11
user4328424

Vous pouvez utiliser la directive ngFormControl au lieu de ngControl et simplement passer la variable de contrôle à l'enfant Input comme ceci:

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

Voir aussi plunkr https://plnkr.co/edit/ydRAOmFG6FU6lxTonWzj?p=preview

La directive NgControl est une balise de formulaire obligatoire dans le modèle enfant.

Voir également 

8
yurzui

Vous pouvez également utiliser le formulaire existant du parent en l'ajoutant à la déclaration du composant enfant.

viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
0
Alan Smith