Question

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

将双向数据绑定与模型驱动表单相结合的最佳方法是什么？我尝试使用[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();

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

我正在使用棱角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路数据绑定与模型驱动表单相结合？

1 个答案: