Angular 2 error- There is no directive with "exportAs" set to "ngModel" with RC4 version
Solution 1
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';
Solution 2
Do not import the FORM_DIRECTIVES
and CORE_DIRECTIVES
because they are deprecated, instead make sure that you import the NgForm
. You can use the following:
import {FormGroup, FormBuilder, FormControl, Validators, NgForm } from '@angular/forms';
Sasi Dhivya
Updated on June 12, 2022Comments
-
Sasi Dhivya almost 2 years
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 tongModel
.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 ) { } }