1

我有以下表格：

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指令值的迹象。我错过了什么吗？

4

1 回答 1

5

在angular.io 文档中定义name表单属性是一项要求：

NgForm在内部，Angular 创建 FormControl 实例并使用Angular 附加到<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>
于 2017-05-30T10:36:02.613 回答