Can't bind to 'ngModel' since it isn't a known property of 'input' during two way data binding in Angular 2

Question

I am comparatively new in angular 2.

I am trying to use 2 way data binding in a form like this-

Model like this-

export interface Profile
{
    id: number;
    name: string;
    dob: string;
};

Template like this-

<form action="profile">
    <div class="modal-body">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" placeholder="Enter Name"    ngDefaultControl [(ngModel)]="profileToAdd.name">
        </div>
        <div class="form-group">
            <label for="dob">Date Of birth:</label>
            <input type="date" class="form-control" placeholder="Date of Birth" ngDefaultControl [(ngModel)]="profileToAdd.dob">
        </div>
    </div>

    <div class="modal-footer">
        <button class="btn btn-warning" type="reset"                    >Reset</button>
        <button class="btn btn-info"    (click)="addProfileSubmit($event)" >Add Profile</button>
    </div>
</form>

and Component like this-

'use strict';

import { Component } from '@angular/core';
import { Http, RequestOptions, URLSearchParams } from '@angular/http';
import { Profile } from '../../dataModel/Profile.ts';   //Data Model
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';

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

@Component({
    selector: 'profile-list',
    template: require('./profileList.component.html'),
    styles: [require('./profileList.component.css')]
})

export class ProfileListComponent
{

    private profileToAdd: Profile;         //Current Profile to add from pop up

    ..........
    ..........

    public addProfileSubmit(event): void
    {
        console.log(this.profileToAdd);
        ..........
        ..........
    }
}

I am getting error like this-

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" class="form-control" placeholder="Enter Name" ngDefaultControl [ERROR ->][(ngModel)]="profileToAdd.name">
</div>
<div class="form-gr"): t@52:109
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="date" class="form-control" placeholder="Date of Birth" ngDefaultControl [ERROR ->][(ngModel)]="profileToAdd.dob">
</div>
</div>
"): t@56:109
at TemplateParser.parse (D:\ProfileManagement\ProfileManagement\node_modules\@angular\compiler\bundles\compiler.umd.js:8530:21)
at RuntimeCompiler._compileTemplate (D:\ProfileManagement\ProfileManagement\node_modules\@angular\compiler\bundles\compiler.umd.js:16905:53)
at D:\ProfileManagement\ProfileManagement\node_modules\@angular\compiler\bundles\compiler.umd.js:16828:85
at Set.forEach (native)
at compile (D:\ProfileManagement\ProfileManagement\node_modules\@angular\compiler\bundles\compiler.umd.js:16828:49)
at ZoneDelegate.invoke (D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:232:26)
at Zone.run (D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:114:43)
at D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:502:57
at ZoneDelegate.invokeTask (D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:265:35)
at Zone.runTask (D:\ProfileManagement\ProfileManagement\node_modules\zone.js\dist\zone-node.js:154:47)

Re-

My Current code is uploaded here-

https://github.com/abrarjahin/Dot.NetCore_Angular2_App/tree/master/ProfileManagement/ClientApp/app/components/profile-list

---

Can anyone help me please?

Thanks in advance for helping.

Answer 1

I believe your issue is that you are not "Newing up" a new instance of your interface. and setting the values of the new profile to that new instance of the interface. Also I am not familiar with interface, I changed it to an export class.

  @Component({
  selector: 'my-app',
  template: `
    <div>
      <input [(ngModel)]="id" />
      <button (click)="add()">add</button>

      <h1>{{newProfile.id}}</h1> 



    </div>
  `,
})
export class App {
  id: number;
  public newProfile : Profile = new Profile();

  constructor() {

  }

  add(){
    this.newProfile.id = this.id;
    console.log(this.newProfile.id);

  }

}

here is the Model imported

export class Profile

{
    id: number;
    name: string;
    dob: string;
     constructor() {
    }
};

Here is a working plunker https://plnkr.co/edit/D9UO9Pzx2NjJKlheWxSO?p=preview

Answer 2

You are missing FormsModule import in your module:

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

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

NgModel directive is part of FormsModule, thus the need to import it. You can read more about NgModel directive here.