angular 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:

Internally, Angular creates FormControl instances and registers them with an NgForm directive that Angular attached to the <form> tag. Each FormControl is registered under the name you assigned to the name attribute.

因此没有名称，它不被视为表单控件。我们还需要使用 ngModel:

The NgForm directive supplements the form element with additional features. It holds the controls you created for the elements with an ngModel directive and name attribute

总而言之，您的模板应如下所示：

<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>

angular 2 - ngForm.value 没有 ngControl 成员

angular 2 - ngForm.value does not have ngControl members

ng-submit

angular2-forms

angular