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'

Answer 1

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

Answer 2

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