角度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指令的值的ngControl 。 我想念什么嗎？

Answer 1

從angular.io docs開始 ，需要在表單中定義name屬性：

在內部，Angular創建FormControl實例，並使用Angular附加到<form>標記的NgForm指令注冊它們。 每個FormControl都以您分配給name屬性的名稱注冊。

因此，沒有名稱，就不會將其視為表單控件。 另外我們需要使用ngModel ：

NgForm指令通過附加功能補充了form元素。 它使用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>