如何将 2 路数据绑定与模型驱动形式结合起来？

Question

在angular2中构建表单的一种可能性是模型驱动方式。据我了解，控件松散了它们的 2 路数据绑定，与 ngModel 的模板驱动方式相反。

将 2 种数据绑定与模型驱动表单相结合的最佳方式是什么？我尝试将模型绑定与 [value] 一起使用：

<form [ngFormModel]="hero" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" [value]="hero.value.name" 
           class="form-control" ngControl="name">

这似乎可行：如果模型以编程方式更改，控件也会更新。

但我不确定这是否是正确的方法。我注意到，如果我尝试通过

更新验证

this.hero.updateValueAndValidity();

在超时函数中，控件值和模型将重置为原始值。

我正在使用 angular 2 beta.15。

Answer 1

事实上，您可以像这样混合 ngControl 和 ngModel：

<form ngForm="hero" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" [(ngModel)]="hero.value.name" 
       class="form-control" ngControl="name">
  </div>
</form>

在这种情况下，您在 hero.value.name 上进行了双向绑定。 ngModel 允许在输入字段上附加属性并使它们同步（双向绑定）。控件允许应用验证，在字段是否有效、被触摸时得到通知，...并收到更新通知 (valueChanges)。

看到这个 plunkr：https://plnkr.co/edit/XnfGDE7vTTogH8yxtxjo?p=preview。

那是说您可以混合使用内联 (ngControl) 和编程形式定义 (ngFormModel)。

有关详细信息，请参阅本文：

http://restlet.com/blog/2016/02/11/implementing-angular2-forms-beyond-basics-part-1/

如何将 2 路数据绑定与模型驱动形式结合起来？

How to combine 2 way databinding with model driven forms?

angular2-forms

angular