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 ：

在内部，Angular创建FormControl实例并使用NgForm指令注册它们，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>

angular 2 - ngForm.value没有ngControl成员

1 个答案: