Sasi Dhivya Sasi Dhivya - 4 months ago 155
TypeScript Question

Angular 2 errror- There is no directive with "exportAs" set to "ngModel" with RC4 version

I am using angular 2 forms in my application and i have created the forms based on given link.

https://angular.io/docs/ts/latest/guide/forms.html

In this for validation and to use forms APIs, i have set the

ngmodel
values like
#name="id" #id="ngModel'
and which throws script error. But its resolved if i set
#id="ngModel as #id="ngForm"
. But for my case i have to set my model value to
ngModel
.

Below is my html page.

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
<label class="control-label" for="id">Employee ID</label>
<input type="text" class="form-control" required [(ngModel)]="model.id" #name="id" #id="ngModel" >
<div [hidden]="id.valid || id.pristine" class="alert alert-danger">
Employee ID is required
</div>
</div>
<div class="form-group">
<label for="name">Employee Name</label>
<input type="text" class="form-control" [(ngModel)]="model.name" name="name" #name="ngModel" required>
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Employee ID is required
</div>
</div>
<div class="form-group">
<label for="DOJ">DOJ</label>
<input class="form-control" required [(ngModel)]="model.DOJ" name="DOJ" #DOJ="ngModel" />
<div [hidden]="DOJ.valid || DOJ.pristine" class="alert alert-danger">
DOJ is required
</div>
</div>
<button type="submit" class="btn btn-default" [disabled]="!myForm.form.valid">Submit</button>
</form>


Below is my issue.

EXCEPTION: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
<div>
<h1>My Form</h1>
<form (ngSubmit)="onSubmit()" [ERROR ->]#myForm="ngModel">
<div class="form-group>
<label class="control-label" for="id">Employee"):AppComponent@3:34


I have checked with more questions and answers, most of them said to update angular2 version to
RC4
so i have updated my application to rc4 but still i am facing this issue.

Below is my ts file:

import {Component} from '@angular/core';
import { disableDeprecatedForms, provideForms , NgForm} from '@angular/forms';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/common';


@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html',
directives: [ CORE_DIRECTIVES,FORM_DIRECTIVES]
})
export class AppComponent {
model = new Employees(null,'','');
onSubmit() { alert("values submitted")}
constructor() {
}
}
export class Employees {
constructor( public id: number,public name: string, public DOJ: String ) { }


}

Can you please anyone suggest on this.

Answer

Don't mix the new and old forms module.

import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/common';

imports forms stuff from @angular/common. If you use the new forms

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()])

then use instead

import {FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/forms';