角度2、形式のテキスト入力の値を設定

Question

私は角度2を試しています。しかし、私はこの新しい風景を辿るには何か助けが必要です。

ユーザーの詳細を編集するためのフォームと、すべてのユーザーの横にあるリストがあります。リストの中の1人のユーザをクリックすると、自分の編集ユーザフォームにユーザの詳細（setEditForm（user））を設定したいと思います。

私はそれがすべて働いています。しかし、ngControlとngModelを同時に使用するのはまったく正しいとは言えません。しかし、おそらくそれは...

これを行う正しい方法ですか、私はちょうどそれが動作するようにいくつかの運を持っていますか？

@Component({ 
    template: ` 
    <form (ngSubmit)="editUser(f.value)" #f="ngForm"> 
     <input ngControl="nameInp" [ngModel]="selectedUser.name" type="text"> 
     <input ngControl="ageInp" [ngModel]="selectedUser.age" type="text"> 
     <input ngControl="cityInp" [ngModel]="selectedUser.city" type="text"> 

     <button type="submit">Save</button> 
    </form> 
)} 

export class AdminComponent { 
selectedUser:UserModel; 

constructor() { 
    this.selectedUser = new UserModel; 
    } 

    setEditForm(user:UserModel) { 
    this.selectedUser = user; 
    } 

    editUser(form:any) { 
    // Update DB with values 
    console.log(form['nameInp']); 
    console.log(form['ageInp']); 
    console.log(form['cityInp']); 
    } 
} 

Answer 1

あなたが同時にngControl/ngFormControlとngModelを使用することができます確かに。 Angular2ドキュメント（https://angular.io/docs/ts/latest/guide/forms.html）から：[（ngModel）]との結合

• 双方向データ読み書き値の構文入力に変更状態を追跡するngControlを用い

• を制御しフォームの妥当性は

• SHを無効にフォームコントロールをユーザーに検証エラーを表示し、有効/

• 制御しますテンプレートを使用してコントロール間で情報をARINGローカル変数

私は検証を必要とするが、あなたは、両方を混在させることができる場合、私は結合双方向およびngForm/ngFormControlが必要な場合は要するに、私はngModelを使用します。

だけ入力値が更新されたときの値と通知を取得する必要がある場合は、ngControl/ngFormControl`は十分です...

の両方が変更を検出することができます：

• イベントngModelChange
• を購読しますon ctrl.valueChanges

フォーム要素にngModelの双方向バインディングを設定できます。

<form (ngSubmit)="editUser(f.value)" #f="ngForm"> 
    <input ngControl="nameInp" [(ngModel)]="selectedUser.name" type="text"> 
    <input ngControl="ageInp" [(ngModel)]="selectedUser.age" type="text"> 
    <input ngControl="cityInp" [(ngModel)]="selectedUser.city" type="text"> 

    <button type="submit">Save</button> 
</form>