#form="ngForm" 和 [ngFormModel]="form" 之间的区别？

Question

两者有什么区别：

<form #form="ngForm">

和

<form [ngFormModel]="form">

你什么时候用一个代替另一个？

Answer 1

使用第一种策略，您可以为表单内联定义一个控件。对于简单的验证，这种方法就足够了。 NgForm 指令隐含地应用于 <form> 元素。您可以使用局部变量来引用 HTML 元素或对其应用特定指令。在您的情况下，这是一个指令。这允许您在表达式中使用局部变量：

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

对于另一个，您引用了使用组件 class 中的 FormBuilder class 定义的控件，如下所述：

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]
    });
  }
}

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

希望对你有帮助，蒂埃里

Answer 2

第一个策略是 'template-driven' 表单：Angular 将向表单添加一个隐式指令，并且您主要在模板中以声明方式添加验证器，因此名称 'template-driven'。例如，这是如何添加一个验证器，说明该字段是必需的：

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

这里我们使用了必需的属性，Angular 通过隐式指令配置了必需的验证器。这种类型的表单非常适合与 ng-model 一起使用，非常适合将 Angular 1 表单迁移到 Angular 2.

第二种策略是'model-driven'形式。这里我们不在模板上声明验证器，而是声明控件名称：

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

然后，所有验证逻辑都通过代码而不是在模板中声明。我们也可以订阅表单作为 Observable 并使用函数式反应式编程技术。例如：

@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);
        });
    }
}

这也适用于 NgModel，但正如我们所见，不需要它，因为我们已经可以通过表单控件获取表单的值。

所以两者之间的选择在很大程度上取决于用例：

如果迁移现有表单，请考虑 NgModel + 选项 1
如果构建新表单并想尝试函数式响应式编程技术，请考虑 formGroup 选项 2
如前所述，NgModel 也适用于选项 2。因此您可以结合通过代码定义验证器和通过 NgModel 获取表单值。您不会被迫使用 formGroup 的函数式响应式编程技术，尽管一定要尝试一下，它非常强大

P.S。在 Angular2

中查看有关新表格的更多信息

#form="ngForm" 和 [ngFormModel]="form" 之间的区别？

Difference between #form="ngForm" and [ngFormModel]="form"?

angular2-forms

angular