#form=“ngform”和[ngFormModel]=“form”之间的区别？

Question

两者有何不同：

<form #form="ngForm">

和

<form [ngFormModel]="form">

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

Answer 1

第一种策略是“模板驱动”表单：Angular将向表单添加一个隐式html" target="_blank">指令，然后在模板中以声明方式添加验证器，因此命名为“模板驱动”。例如，这是如何添加一个验证器，说明该字段是必需的：

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

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

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

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

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

附言。在这里查看更多关于Angular2中新窗体的信息