如何將2路數據綁定與模型驅動的表單結合起來？

Question

在角度2中，建築形式的一種可能性是模型驅動的方式。據我所知，控制鬆散他們的雙向數據綁定，與ngModel的模板驅動方式相反。

將2路數據綁定與模型驅動表單結合的最佳方式是什麼？ 我tryed使用模型[值]結合：

<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/