CODEWITHSUNDEEP
angularangular2-forms
user4328424
user4328424

Reputation:

Angular2 No provider for ControlContainer when building a simple form

This is my form:

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

my-child-component: 

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

Error: 

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

If I move the input inside the app component itself, it'll work, but my input is inside a child component.

FORM_DIRECTIVES and FORM_PROVIDERS are being injected at the top app level. I've done exactly everything as per their guides.

I also tried adding FORM_DIRECTIVES to the child or to app.component with no success.

Upvotes: 13

Views: 33013

Answers (2)

Alan Smith
Alan Smith

Reputation: 1169

Alternatively you can use the existing form from the parent by adding this to the child component declaration.

viewProviders: [{provide: ControlContainer, useExisting: NgForm}]

Upvotes: 0

yurzui
yurzui

Reputation: 214007

You can use ngFormControl directive instead of ngControl and just pass control variable into child Input like this:

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

See also plunkr https://plnkr.co/edit/ydRAOmFG6FU6lxTonWzj?p=preview

NgControl directive is required form tag within Child template

See also

Upvotes: 9

Related Questions