angular: Cannot bind template reference variables to ngModel in new forms in rc2

I’m submitting a … (check one with “x”)

[x] bug report
[x] feature request

Current behavior When using the new forms with rc2 binding a template reference variable to ngModel doesn’t work as described in the new form proposal. The error I’m getting is:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
There is no directive with "exportAs" set to "ngModel" (" type="text" class="form-control"
 formControlName="email" [(ngModel)]="admin.email" [ERROR ->]#email="ngModel">
 <div *ngIf="loginForm.hasError('required', 'email') && email.touched" c"): LoginComponent@12:66
There is no directive with "exportAs" set to "ngModel" ("assword" class="form-control"
 formControlName="password" [(ngModel)]="admin.password" [ERROR ->]#password="ngModel">
 <div *ngIf="loginForm.hasError('required', 'password') && password.t"): LoginComponent@19:70

Expected/desired behavior It should be possible to bind a template reference variable to ngModel to check if a field is valid, touched, pristine, etc. Like so:

<input [(ngModel)]="person.name.first" #first="ngModel">
<input [(ngModel)]="person.name.last">
{{ first.valid }}  // true

Reproduction of the problem Trying to bind ngModel to a template reference variable.

What is the motivation / use case for changing the behavior? To show custom error messages, like so:

<input type="text" class="form-control"
  formControlName="email" [(ngModel)]="admin.email" name="email" #email="ngModel">
<div *ngIf="loginForm.hasError('required', 'email') && email.touched" class="alert alert-danger">Email is required</div>
<div *ngIf="loginForm.hasError('pattern', 'email') && email.touched" class="alert alert-danger">Not a valid email address</div>

Please tell us about your environment:

Angular version: 2.0.0-rc.2
Browser: [all]
Language: [TypeScript 1.8.10 | ES5]

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 36 (16 by maintainers)

Most upvoted comments

@ericmartinezr Thanks for taking a look at this and creating a plunker. I reviewed the plunker code, and it looks like you’re using both formControlName and ngModel. In that case, the only activated directive is actually formControlName - it simply uses ngModel as an input property. For that reason, trying to export ngModel won’t work. The preferred way to access the individual control data when using reactive form directives would be through the backing FormControl instance on your class rather than an export.

If you use ngModel using the template-driven strategy, it should export as ngModel correctly: http://plnkr.co/edit/c9D0R58vadLopH5rUNeg?p=preview

If you’re using a reactive strategy, try accessing the FormControl instance from your class instead: http://plnkr.co/edit/G6jWu91ng7sOnvdYyAV7?p=preview

kara on Jun 22, 2016

@agarwali You can save a reference to the FormControl instance when you create it in your class, before passing it to the FormGroup. Then it’s easy to access it in your view like any other property on your class.

See this plunker for an example: http://plnkr.co/edit/G6jWu91ng7sOnvdYyAV7?p=preview

Worth noting: we should definitely make this easier and more intuitive. There are more improvements to come! Will definitely consider this case.

kara on Jun 22, 2016

Hi, I had the same problem and I’m getting the same template parse error in rc.3. Below is the input field code i’m using.

<form  #employee_form="ngForm" [formGroup]="employeeForm" (ngSubmit)="onSubmit()">
<input #first_name="ngModel"
            [(ngModel)]="employee.first_name"
            formControlName="first_name"
            type="text"
            id="first_name"
            [ngClass]="{invalid: first_name.touched && !first_name.valid}"
            name="first_name">
<!--Other form elements-->
<form>

agarwali on Jun 22, 2016

Hi, @kara. I have error ‘There is no directive with “exportAs” set to ngModel’ in rc.4 if i use ngModel with textarea: http://plnkr.co/edit/VJTYj24yZt9MdctaEVdb?p=preview I didn’t find nothing about using ngModel and textarea in docs(

byorty on Jul 12, 2016

@ericmartinezr thanks for your quick response. I actually looked into my node_modules folder i don’t have the file ng_model.ts. But I do have the a file ng_mode.d.ts, which doesn’t even have the directive decorator. Not sure if this is related to my node_modules or sth else.

agarwali on Jun 22, 2016