Angular 2+ Error - Uncaught Error: Template parse errors: There is no directive with “exportAs” set to “ngModel” (“-group”>

Question

i am using Angular 2+ forms.

Error in details : Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "ngModel" ("-group"> First Name ]#firstName = "ngModel" (change) ="log(firstName)" id="firstName" class="form-control"> ) at JitCompiler._compileComponents (compiler.js:25895) at compiler.js:25808 at Object.then (compiler.js:2166) at JitCompiler._compileModuleAndComponents (compiler.js:25807)

Below is my contact-form.component.html page :

   <form>
         <div class="form-group">
        <label for="firstName">First Name</label>
        <input required ngModel name="firstName" #firstName = "ngModel" (change) ="log(firstName)" id="firstName"  class="form-control">
        <div class="alert alert-danger" *ngIf = "!firstName.valid">First Name is required</div>
        </div>
        <div class="form-group">
            <label for="comment">Comment</label>
            <textarea ngModel name ="comment" id="comment" cols="30" rows="10" class="form-control"></textarea>
        </div>

        <button class="btn btn-primary">Submit</button>

    </form>

below is my contact-form.component.ts page  : 




import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'contact-form',
      templateUrl: './contact-form.component.html',
      styleUrls: ['./contact-form.component.css']
    })
    export class ContactFormComponent {

      log(x) {
      console.log(x);
       }

    }

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CourseComponent } from './course/course.component'; import { SummaryPipe } from './summary.pipe'; import { PanelComponent } from './panel.component'; import { InputFormatDirective } from './input-format.directive'; import { ContactFormComponent } from './contact-form/contact-form.component'; — Anmol Chopra
@NgModule({ declarations: [ AppComponent, CourseComponent, SummaryPipe, PanelComponent, InputFormatDirective, ContactFormComponent, ], imports: [ BrowserModule, AppRoutingModule ], bootstrap: [AppComponent] }) export class AppModule { } — Anmol Chopra

Anton Anton · Accepted Answer · 2020-02-11T20:34:41

It seems like you are mixing both forms approaches. Instead of this:

<input required ngModel name="firstName" #firstName = "ngModel" (change)="log(firstName)" id="firstName"  class="form-control">

I'd suggest to try (assuming you create a firstName property in ContactFormComponent):

<input required [(ngModel)]="firstName" name="firstName" id="firstName" class="form-control">

Angular 2+ Error - Uncaught Error: Template parse errors: There is no directive with “exportAs” set to “ngModel” (“-group”>

1 Answers