Angular2 ngModel不能正常工作

Question

我試圖從文本輸入中綁定ngModel，但它不起作用。 這裏是我的代碼：

模板：

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

組件：

export class Component implements OnInit { 
    message:string 

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

始終獲得未定義的值。如何將文本輸入的值綁定到變量？

Answer 1

你缺少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); 
    } 
} 

Answer 2

您在使用模板驅動的形式的時候給input一個name屬性。

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

參考這個簡單的plunker demo。