No value accessor for form control with name: 'recipient'

Question

I got this error after upgrading to Angular 2 Rc.5. This is my component template:

<md-input
    [(ngModel)]="recipient"
    name="recipient"
    placeholder="Name"
    class="col-sm-4"
    (blur)="addRecipient(recipient)">
</md-input>

My app.module.ts imports the FormsModule

I also tried to declare private recipient; in my component.

Am I missing something? Why do I get this error?

No value accessor for form control with name: 'recipient'

Dup of http://stackoverflow.com/questions/38958347/angular2-rc-5-custom-input-no-value-accessor-for-form-control-with-unspecified/39013152#39013152 ? — Günter Zöchbauer, Aug 18 '16 at 08:19

score 144 · Accepted Answer · edited Feb 24 '18 at 14:05

144

You should add the ngDefaultControl attribute to your input like this:

<md-input
    [(ngModel)]="recipient"
    name="recipient"
    placeholder="Name"
    class="col-sm-4"
    (blur)="addRecipient(recipient)"
    ngDefaultControl>
</md-input>

Taken from comments in this post:

angular2 rc.5 custom input, No value accessor for form control with unspecified name

Note: For later versions of @angular/material:

Nowadays you should instead write:

<md-input-container>
    <input
        mdInput
        [(ngModel)]="recipient"
        name="recipient"
        placeholder="Name"
        (blur)="addRecipient(recipient)">
</md-input-container>

See https://material.angular.io/components/input/overview

edited Feb 24 '18 at 14:05

Sagar

3,107
2
26
35

answered Aug 17 '16 at 16:32

Peter Salomonsen

5,525
2
24
38

3

It works for me but can someone explain me why we have to add "ngDefaultControl" ? – jpmottin Aug 05 '17 at 12:09
That was because md-input was no known tag for ngModel, but for recent versions of @angular/material you should use the input tag with mdInput as an attribute instead wrapped in an md-input-container element. See https://material.angular.io/components/input/overview – Peter Salomonsen Aug 05 '17 at 22:10

score 15 · Answer 2 · answered Aug 16 '16 at 15:44

15

Make sure you import MaterialModule as well since you are using md-input which does not belong to FormsModule

answered Aug 16 '16 at 15:44

Ophir Bushinsky

1,399
11
12

What npm package should be installed to get the MaterialModule? – Peter Salomonsen Aug 17 '16 at 07:03
I think it's @angular2-material/core – Ophir Bushinsky Aug 17 '16 at 08:26
No MaterialModule in @angular2-material/core – Peter Salomonsen Aug 17 '16 at 09:08
ok I checked it and you need to do: npm install @angular2-material/core --save and npm install @angular2-material/input --save, then import MdInputModule from @angular2-material/input – Ophir Bushinsky Aug 17 '16 at 15:44
I have imported the MdInputModule, but when I add [(ngModel)] to my md-input I get the same error message as in the question: "No value accessor for form control". Have you tested with ngModel? (which is what the question referred to). – Peter Salomonsen Aug 17 '16 at 16:25
Yes I have and it worked for me... Are you sure you imported it to the right module? – Ophir Bushinsky Aug 17 '16 at 17:13
Yes I did import the MdInputModule (I already had). But this happened for me just as posted in the question after upgrading to angular2 rc 5 (and also upgraded angular materials to alpha 7). But I made it work again by adding the ngDefaultControl attribute to the md-input tag. Also see the post here: http://stackoverflow.com/questions/38958347/angular2-rc-5-custom-input-no-value-accessor-for-form-control-with-unspecified – Peter Salomonsen Aug 17 '16 at 17:23

No value accessor for form control with name: 'recipient'

2 Answers2