Question

两者之间有什么区别：

<form #form="ngForm">

和

<form [ngFormModel]="form">

你何时使用其中一个？

Answer 1

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

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

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

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

<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 here

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

Answer 2

使用第一个策略，您可以为内联的表单定义控件。对于简单验证，这种方法就足够了。隐含地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）。

希望它可以帮到你，亨利

#form =＆＃34; ngForm＆＃34;之间的区别和[ngFormModel] =＆＃34;表格＆＃34;？

2 个答案: