Angular2 ngModel不起作用

Question

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?

Answer 1

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 .

Answer 2

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);
  }
}