Angular 4. Troubles with Forms Module

Question

I took example from here: Angular 4 Forms Directive (ngForm) And get errors: no directives for ngModel and ngForm. Seems directive wasn't included.

ERROR Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "exportAs" set to "NgForm" ("<form (ngSubmit)="onSubmit(f)" [ERROR ->]#f="NgForm" novalidate> <input name="first" [(ngModel)]="first" required #first="ngModel"> .....

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "exportAs" set to "ngModel" ("
 <form (ngSubmit)="onSubmit(f)" novalidate>
   <input name="first" ngModel required [ERROR ->]#first="ngModel">
   <input name="last" ngModel>
   <button>Submit</button>"): ng:///AuthModule/LoginComponent.html@2:44 Error: Template parse errors: There is no directive with "exportAs" set to "ngModel" ("<form (ngSubmit)="onSubmit(f)" novalidate><input name="first" ngModel required [ERROR ->]#first="ngModel"><input name="last" ngModel><button>Submit</button>"): ng:///AuthModule/LoginComponent.html@2:44
at syntaxError (http://localhost:4200/vendor.bundle.js:50027:34) [angular]....

Files are here:

Module file: login.module.ts

     import { NgModule } from '@angular/core';
     import { CommonModule } from '@angular/common';
     import { FormsModule } from '@angular/forms';
     import { BrowserModule } from '@angular/platform-browser';

     import { LoginComponent } from './login.component';
     @NgModule({
         imports: [
             CommonModule,
             FormsModule,
             BrowserModule
         ],
         declarations: [LoginComponent],
         bootstrap: [LoginComponent],
    })
    export class LoginModule {}

Component file: login.component.ts

    import { Component } from '@angular/core';
    import { NgForm } from '@angular/forms';

    @Component({
        selector: 'sc-auth-login',
        template: `
            <form (ngSubmit)="onSubmit(f)" #f="ngForm" novalidate>
            <input name="first" ngModel required #first="ngModel">
            <input name="last" ngModel>
            <button>Submit</button>
            </form>
            <p>First name value: {{ first.value }}</p>
            <p>First name valid: {{ first.valid }}</p>
            <p>Form value: {{ f.value | json }}</p>
            <p>Form valid: {{ f.valid }}</p>
        `,
    })
    export class LoginComponent {
        onSubmit(f: NgForm) {
        console.log(f.value);  // { first: '', last: '' }
        console.log(f.valid);  // false
    }
}

Any idea what is wrong with it?

Answer 1

You have to provide name to ngModel.so that local variable can be created.

<input name="first" [(ngModel)]="first" required #first="ngModel">
<input name="last" [(ngModel)]="last" #last="ngModel">

Answer 2

In my case, I was just missing ngModel directive to the input field

<input ngModel name="name" #name="ngModel">

by adding it resolved the issue.