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