Geek Answers Handbook

Angular 2 error- There is no directive with the parameter "exportAs" set to "ngModel" with version RC4

I use angular 2 forms in my application and I created forms based on this link.

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

In this case, to check and use the form APIs, I set the ngModel values ​​as #name="id" #id="ngModel" and which throws a script error. But it is allowed if I set #id="ngModel" as #id="ngForm" . But for my case, I have to set the value of the ngModel model.

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 problem.

  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 checked with a lot of questions and answers, most of them said to upgrade angular2 to RC4 , so I upgraded my application to rc4, but still I ran into this problem.

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 ) { } }
+6
source share
2 answers

Do not mix new and old forms.

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

imports formatting elements from @angular/common . If you use new forms

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

then use instead

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

Do not import FORM_DIRECTIVES and CORE_DIRECTIVES because they are deprecated; instead, make sure you import NgForm . You can use the following:

 import {FormGroup, FormBuilder, FormControl, Validators, NgForm } from '@angular/forms';
+1
source

More articles:


All Articles