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

Question

两者有什么区别:

<form #form="ngForm">

和

<form [ngFormModel]="form">

你什么时候用另一个？

Answer 1

第一个策略是"模板驱动"形式:Angular将向表单添加隐式指令,并且您在模板中主要以声明方式添加验证器,因此名称为"模板驱动".例如,这是如何添加验证器,说明该字段是必需的:

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

这里我们使用了必需的属性,Angular通过一个隐式指令配置了所需的Validator.这种形式非常适合与ng模型一起使用,非常适合将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中有关新表单的更多信息

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为表单元素组合它们(请参阅参考资料).

希望它对你有帮助,蒂埃里