CODEWITHSUNDEEP
angulartypescript
Chandra Mouli
Chandra Mouli

Reputation: 49

There is no directive with "exportAs" set to "ngModel" in Angular

I am actually working on a form and i am doing the validations for each field. but there is an issue. my block of component.html file looks like this,

 <div class="field"style="padding:1%">
      <label>Pacs name</label>

      <input 
      name ="name" 
      type="text" 
      [(ngModel)]="pacs.name" 
      formControlName="pacName" 
      required 
      pattern="[a-zA-Z][a-zA-Z ]+"
      #name="ngModel"
      >

  </div>

This is the field i am working on but when i am using #name="ngModel" i am getting this error in browser.

there is no directive with "exportAs" set to "ngModel"

I placed FormsModule is the respective module.ts file. and my respective imports in component.ts file looks like this.

import { Component, OnInit,Directive, forwardRef, 
  Attribute,OnChanges, SimpleChanges,Input  } from '@angular/core';
import { FormsModule, ReactiveFormsModule,NG_VALIDATORS,Validator,
  AbstractControl,ValidatorFn } from '@angular/forms';
import { FormBuilder, FormGroup,FormControl, Validators, Form, NgForm} from '@angular/forms';

I think there could be versioning problem,

so my versions are, Angular CLI: 1.7.0 Node: 6.11.4 OS: linux x64

Could someone please help ? i am not understanding where is the exact problem.

Upvotes: 3

Views: 9788

Answers (2)

Yakov Fain
Yakov Fain

Reputation: 12376

On one hand, you use reactive API linking this control to the explicitly created model property from your TS code: formControlName="pacName". On the other, you're trying to bind to the never-created implicit model from the template-driven API: #name="ngModel" and name="name".

In the template driven API you could do something like this:

<input type="text" name="username" ngModel #name="ngModel"> 

Just remove #name="ngModel" and name="name" from your code.

Upvotes: 7

Milan Raval
Milan Raval

Reputation: 1890

If you want to reference your input element in component i.e. a custom control/child control then you can give it a reference name with #nameofcontrol

Check this answer : what is the difference between the #name and [(ngModel)]="name" in Angular2 Form input?

Upvotes: 0

Related Questions