Angular “形式=”之间的差异；ngForm"；和[ngFormModel]="；表格"；？

两者的区别是什么：

<form #form="ngForm">

及

---

什么时候使用一个而不是另一个？

在第一个策略中，您为表单内联定义了一个控件。对于简单的验证，这种方法就足够了。

NgForm

指令隐式应用于

元素。您可以使用局部变量引用HTML元素，也可以对其应用特定的指令。对你来说，这是一个指令。这允许您在表达式中使用局部变量：

<form #form="ngForm">
  <button type="submit" [disabled]="!ngForm.valid">Submit</button>
</form>

第二种方法更高级，允许注册自定义验证器、异步验证器并为表单元素组合它们（请参见

validators.compose

）

希望它能帮助你，

---

Thierry

第一种策略是“模板驱动”表单：Angular将向表单添加一个隐式指令，并且您在模板中添加的验证器主要是声明性的，因此名称为“模板驱动”。例如，这是如何添加验证程序，说明该字段是必需的：

<form #form="ngForm">
    <input name="firstName" required [(ngModel)]="formModel">
</form>

这也适用于

NgModel

，但正如我们看到的那样，这是不需要的，因为我们已经可以通过表单控件获得表单的值

因此，两者之间的选择在很大程度上取决于用例：

< LI>如果迁移现有的表单，请考虑NGMe+选项1 <> LI>如果构建一种新的形式并尝试功能性的反应式编程技术，请考虑<代码>窗体组< /代码>选项2
• 如前所述，NgModel也适用于选项2。因此，您可以通过代码组合定义验证器，并通过NgModel获得表单值。您不必在

  formGroup

  中使用函数式反应式编程技术，尽管您肯定会尝试一下，但它非常强大

---

另外，在Angular2中查看更多关于新表单的信息

看看我下面的答案，你也可以在这里找到这两种表单的更多细节和代码示例->查看上面的代码，firstName控件中是否有重复？是否应

“firstName”：[“”，验证器.required]

为

“firstName”=firstName

？“firstName”=this.firstName替代：[formControl]=“form.controls['firstName']”。。。正如你在这里看到的：

export class DetailsComponent {
  constructor(builder:FormBuilder) {
    this.companyForm = builder.group({
      name: ['', Validators.required,  
         createUniqueNameValidator(service,this)],
      tags: ['', notEmptyValidator],
      addressStreet: ['', Validators.required],
      addressZipCode: ['', Validators.compose([ Validators.required, 
               zipCodeValidator ])],
      addressCity: ['', Validators.required]
    });
  }
}

<form #form="ngForm">
    <input name="firstName" required [(ngModel)]="formModel">
</form>

<form [formGroup]="form">
    <input name="firstName" formControlName="firstName">
</form>

@Component({
    selector: "some-component",
    templateUrl: 'model-driven-form.html'
})
export class ModelDrivenForm {
    form: FormGroup;
    firstName = new FormControl ("", Validators.required);
    constructor(fb: FormBuilder) {
        this.form = fb.group({
            "firstName":["", Validators.required]
        });
        this.form.valueChanges
        .subscribe((formValue) => {
            console.log(formValue);
        });
    }
}