26

两者有什么区别：

<form #form="ngForm">

和

<form [ngFormModel]="form">

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

4

2 回答 2

31

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

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

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

第二种策略是“模型驱动”形式。这里我们不在模板上声明验证器，而是声明控件名称：

<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，尽管绝对试一试，但它非常强大

PS 在此处查看有关 Angular2 中新表单的更多信息

于 2016-01-29T20:00:45.603 回答
5

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

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

另一个是使用FormBuilder组件类中的类定义的控件，如下所述：

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为表单元素组合它们（参见 参考资料）。

希望它可以帮助你，蒂埃里

于 2016-01-29T19:47:21.477 回答