CODEWITHSUNDEEP
angular
bluray
bluray

Reputation: 1953

Angular2 ngModel not working

I am trying to bind ngModel from text input but it's is not working. Here is my code:

Template:

<form (ngSubmit)="onSubmit()">
    <div class="form-group">
        <input type="text" class="form-control" [(ngModel)]="message">
    </div>
    <input type="submit">
</form>

Component:

export class Component implements OnInit {
  message:string

  onSubmit() {
    console.log(this.message);
  }
}

Always getting undefined value. How to bind value from the text input to variable?

Upvotes: 1

Views: 2230

Answers (2)

Pengyy
Pengyy

Reputation: 38161

you have to give input a name property when using template-driven form.

<input type="text" name="message" [(ngModel)]="message">

refer this simple plunker demo.

Upvotes: 7

Arun Kumaresh
Arun Kumaresh

Reputation: 6311

You are missing ngForm

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <div class="form-group">
        <input type="text" class="form-control" name="message" [(ngModel)]="message">
      </div>
      <input type="button">
    </form>

export class Component implements OnInit {
  message:string

   ngOnInit() {
this.message = "test";
}

  onSubmit(form: ngForm) {
    console.log(form.value);
  }
}

Upvotes: 2

Related Questions