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

Question

在 Angular 2 中，一种构建形式的可能性是模型驱动方式。据我了解，控件松散了它们的 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/