CODEWITHSUNDEEP
angular
TheUnreal
TheUnreal

Reputation: 24462

Using ngControl caused error: No provider for ControlContainer

I'm trying to use ngControl for the first time in my app:

<md-input placeholder="Amount" value="0" ngControl="ammount" required></md-input>

Added the following in my component:

import { FORM_PROVIDERS,FORM_DIRECTIVES } from '@angular/common';

..

directives: [MD_INPUT_DIRECTIVES,
    FORM_DIRECTIVES,
    ],
    providers: [FORM_PROVIDERS],

and I get this error:

browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
No provider for ControlContainer ("

[ERROR ->]<md-input placeholder="Amount" value="0" ngControl="ammount" required></md-input>

What am I missing?

Upvotes: 5

Views: 59102

Answers (2)

yurzui
yurzui

Reputation: 214007

I think that you forgot to wrap the md-input component in form tag, otherwise ngControl won't work:

<form>
   ...
   <md-input placeholder="Amount" value="0" ngControl="ammount" required></md-input>
   ...
</form>

This directive can only be used as a child of NgForm or NgFormModel.

Upvotes: 16

Pardeep Jain
Pardeep Jain

Reputation: 86730

To fix that, you have 2 options: A. in main.ts:

import {FORM_PROVIDERS} from 'angular2/common';

// other code here

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy }),
  FORM_PROVIDERS
]);

B. in your component that uses the form:

import {FORM_PROVIDERS, FORM_DIRECTIVES} from 'angular2/common';
@Component({
  providers: [FORM_PROVIDERS],
  directives: [FORM_DIRECTIVES]
})

Taken from these same issues on github

May help you.

Upvotes: 1

Related Questions