Angular2 ngForm不起作用

Question

我想做一個登錄表單組件，但我無法讀取表單數據。

當我嘗試在控制檯上寫入用戶名時，'undefined'寫道。

一切似乎都很平常，但表單數據並未到達組件。

下面是html代碼：

<form (ngSubmit)="onSubmit(myForm)" 
     #myForm="ngForm" 
     class="form-signin"> 
    <div class="form-group"> 
     <h2 class="form-signin-heading">Please sign in</h2> 
     <input type="text" 
       id="inputUsername" 
       name="inputUsername" 
       class="form-control" 
       placeholder="User Name" 
       required> 
     <input type="password" 
       id="inputPassword" 
       name="inputPassword" 
       class="form-control" 
       placeholder="Password" > 
    </div> 
    <button class="btn btn-lg btn-primary btn-block" 
      type="submit">Sign in</button> 
</form> 

組件TS：

@Component({ 
    selector: 'signin', 
    templateUrl: './signin.component.html', 
    encapsulation: ViewEncapsulation.None 
}) 
export class SigninComponent implements OnInit{ 
    constructor(){} 

    ngOnInit(){ } 

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

在此先感謝。

Answer 1

您需要將ngModel指令添加到每個表單字段。這將表單域註冊到您的表單。

<input type="text" 
      id="inputUsername" 
      name="inputUsername" 
      class="form-control" 
      placeholder="User Name" 
      ngModel 
      required>