角2 - ngForm.value沒有ngControl成員

Question

我有以下形式：

import { Component } from '@angular/core' 

@Component({ 
    selector: 'form1', 
    template: ` 
     <div > 
     <form (ngSubmit)="onSubmit(f)" #f="ngForm"> 
      <input ngControl="email" type="text" id="mail" required>        
      <input ngControl="password" type="text" id="password" required> 
      <input ngControl="confirmPass" type="text" id="confirmPass" required>         
      <button type="submit">Submit </button> 
     </form> 
     </div>     ` 
}) 
export class Form1Component{ 
    onSubmit(form:any){ 
     console.log(form.value); 
    } 
} 

問題是form.value僅一個空的對象，並沒有ngControl指令的值的符號。我錯過了什麼嗎？

Answer 1

定義在形成name屬性是一個要求，從angular.io docs：

在內部，角創建FormControl實例並用NgForm指令，角連接到<form>標籤登記它們。每個FormControl都是以您分配給name屬性的名稱註冊的。

因此，如果沒有名稱，它不會被視爲表單控件。我們還需要使用ngModel：

NgForm指令爲表單元素添加了附加功能。它擁有你的元素與ngModel指令和name屬性

創建因此，所有的所有控件，您的模板應該是這樣的：

<form (ngSubmit)="onSubmit(f)" #f="ngForm"> 
    <input type="text" id="mail" name="email" ngModel required>        
    <input type="text" id="password" name="password" ngModel required> 
    <input type="text" id="confirmPass" name="confirmPass" ngModel required>         
    <button type="submit">Submit </button> 
</form>