CODEWITHSUNDEEP
javascriptangularangular-forms
Teererai Marange
Teererai Marange

Reputation: 2132

Angular: Error no directive with "exportAs" set to "ngForm"

I have tried importing the FormsModule and NgForm modules as well as adding the FormsModule to the imports array.

Below is my code: 

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, NgForm} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
  <form #searchForm="ngForm">
  <input type="text" required [(ngModel)]="model.search" ngControl="search" #inputSearch="ngForm">
  <p class="error" [hidden]="inputSearch.valid"> This input is required</p>


  </form>

  `,
  styles: [`
  .error {
    color: red;
    font-size: 11px;
  }
  `]
})
export class App {
  public model = {
    search: "" 
  }

  constructor() {

  }
}

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

And below is an error printout:

runtime.9ff156e16d788666a54a.js:16 Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" (" ]#searchForm="ngForm"> ]#inputSearch="ngForm"> This input is required

"): ng:///AppModule/App.html@2:76 Can't bind to 'ngModel' since it isn't a known property of 'input'. (" ][(ngModel)]="model.search" ngControl="search" #inputSearch="ngForm"> https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js Loading https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js f @ runtime.9ff156e16d788666a54a.js:16

Upvotes: 1

Views: 24370

Answers (3)

DevNadim
DevNadim

Reputation: 31

import { FormsModule } from '@angular/forms';

  [...]

 @NgModule({
   imports: [
      [...]
     FormsModule
    ],
    [...]
  })

Upvotes: 1

Sundar Garud
Sundar Garud

Reputation: 41

This ng-directive error is faced when you have not imported the ng-module in your app.component.ts or your component is not imported and added into the declarations of @NgModule({})

Upvotes: 3

Developer Thing
Developer Thing

Reputation: 2774

The error was caused by this line: 

#inputSearch="ngForm"

This is the correct line:

#inputSearch="ngModel"

Here is the working example. When you use ngModel within the form tag you also need to provide value for the "name" attribute.

  <form #searchForm="ngForm">
  <input type="text" required name="search" [(ngModel)]="model.search"  #inputSearch="ngModel">
  <p class="error" [hidden]="inputSearch.valid"> This input is required</p>
  </form>

Upvotes: 4

Related Questions