Package.json

{
  "version": "1.0.0",
  "name": "asp",
  "private": true,
  "dependencies": {
    "@angular/mon": "2.0.0",
    "@angular/piler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20"
  },
  "devDependencies": {
  }
}

This is the app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { LoginComponent } from "./Components/login.Component";


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

I have import the FormsModule in the app.module but still I am facing the issue.

This is the loginponent.ts

import { Component } from '@angular/core';
@Component({
    selector: 'login-app',
    templateUrl: 'Home/partialLogin'
})
export class LoginComponent {
    email: string;
    password: string;
    constructor() {
        this.email = "[email protected]";
        this.password = "test anand";

    }

    login(event) {
        console.log(this.email);
        event.preventDefault();

    }

}

login.cshtml

 <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" name="email" [(ngModule)] ="email" placeholder="username or email">
                    </div>

I have google it for the solution. Everywhere they have mention to import formModule which I have already added But still facing the issue.

Please can anyone solve this issue.

Package.json

{
  "version": "1.0.0",
  "name": "asp",
  "private": true,
  "dependencies": {
    "@angular/mon": "2.0.0",
    "@angular/piler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20"
  },
  "devDependencies": {
  }
}

This is the app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { LoginComponent } from "./Components/login.Component";


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

I have import the FormsModule in the app.module but still I am facing the issue.

This is the login.ponent.ts

import { Component } from '@angular/core';
@Component({
    selector: 'login-app',
    templateUrl: 'Home/partialLogin'
})
export class LoginComponent {
    email: string;
    password: string;
    constructor() {
        this.email = "[email protected]";
        this.password = "test anand";

    }

    login(event) {
        console.log(this.email);
        event.preventDefault();

    }

}

login.cshtml

 <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" name="email" [(ngModule)] ="email" placeholder="username or email">
                    </div>

I have google it for the solution. Everywhere they have mention to import formModule which I have already added But still facing the issue.

Please can anyone solve this issue.

• javascript
• jquery
• angularjs
• angular
• asp-core

• 5 It should be ngModel not ngModule – Satpal Commented Dec 27, 2016 at 10:35

3 Answers 3

It should be ngModel not ngModule. Read more at NgModel documentation

<input type="text" class="form-control" name="email" [(ngModel)]="email" placeholder="username or email">

try this

<input type="text" class="form-control" name="email" [(ngModel)]="email" placeholder="username or email">

you can try [ngModel] alone too this is called property binding but when you use [(ngModel)] this is two way data binding

Where as @NgModule is an annotation of Angular2 which allows us to fetch bundle of code/ponents.

I hope it should be ngModel which contains the value of the input field

Where as ngModule is unlike a module in angularjs which is used to organize an application into blocks of functionality.