Question

我正在使用Angular2。我想做表格验证。目前我的模板如下所示：

<form #f="ngForm" novalidate (ngSubmit)="save()">
        <input type="checkbox" name="showHydroSystemSelection" [(ngModel)]="cosResponse.showHydroSystemSelection.value" (ngModelChange)="onChange(cosResponse.showHydroSystemSelection.shouldRefresh)"/>
        <label>System Selection</label>
        <select name="systemSelection" id="systemSelection" [(ngModel)]="cosResponse.systemSelection.selected" (ngModelChange)="onChange(cosResponse.systemSelection.shouldRefresh)">
            <option *ngFor="let option of cosResponse.systemSelection.value" value="{{option.id}}" >
            {{option.name}}
            </option>
        </select>

</form>

在许多关于如何进行angular2验证的博客中，他们说要在表单上使用formGroup。但如果我这样做，那么棱角就会抱怨错误： “ngModel不能用于使用父formGroup指令注册表单控件。请尝试使用formGroup的partner指令”formControlName“而不是”

使用ngModel的语法对我们的应用来说是非常好的和动态的，它完全依赖于元数据来呈现不同的元素。作为模型的formGroup对我们的需求来说过于明确和静态。我不明白这两种使用模型的方式是什么，以及如何有效地使用formGroup，就像ngModel一样简单

Answer 1

你是对的@vanval！

我认为这是关于代码，策略和用户体验的讨论。

总之，我们改变了模板驱动的方法，更容易使用，被动（在模型驱动的方法中））为了给我们更多控制，通过利用HTML（设计/ CSS团队可以在这里工作）和组件的业务规则（angular / js专家成员）之间的分离，可以产生更好的可测试形式改善用户体验，使用反应式转换，相关验证和处理复杂方案等功能作为运行时验证规则和动态字段重复。

这篇文章是一个很好的参考： Angular 2 Forms - Template Driven and Model Driven Approaches

Angular2模型驱动形式与模板驱动形式

1 个答案: