＃form =“ngForm”和[ngFormModel] =“form”之间的区别？

问题描述：

两者有什么区别：＃form =“ngForm”和[ngFormModel] =“form”之间的区别？

<form #form="ngForm">

而且

<form [ngFormModel]="form">

当你使用一个比其他？

看看我的答案，您还可以在这里找到更多的细节和两种类型的代码示例 - > http://blog.jhades.org/introduction-to -angular-2-forms-template-driven-vs-model-driven/ –

答

第一个策略是“模板驱动”的形式：角将一个隐含的指令添加到表单，您主要是声明在模板中添加验证，所以名称“模板驱动的”。例如，这是如何添加一个验证器说，现场是必需的：

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

这里，我们使用所需的属性，并通过一个隐含的指令角度配置了必要的验证。这种形式非常适合与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确实给它一个尝试，但它的功能非常强大

P.S.查看更多关于Angular2中的新表单的信息here

查看上面的代码，在firstName控件中没有重复吗？应该''firstName“：[”“，Validators.required]'是'”firstName“= firstName'？ –

“firstName”= this.firstName – DeborahK

alternative：[formControl] =“form.controls ['firstName']”...正如你在这里可以看到的：https://www.youtube.com/watch?v=LyRgKQjsGa4&spfreload= 1 spfreload = 1＃吨= 686.389242 – peter70

答

第一种策略是为内联表单定义一个控件。为了简单验证，这种方法就足够了。隐含地，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 =“ngForm”和[ngFormModel] =“form”之间的区别？

相关推荐