web-dev-qa-db-ja.com

Angular 2、フォームのテキスト入力の値を設定

だから私はいくつかのAngular 2を試していますが、これまでのところは気に入っています。しかし、この新しいランドスケープをナビゲートするには助けが必要です。

ユーザーの詳細を編集するフォームと、すべてのユーザーがいる側のリストがあります。リスト内のユーザーの1つをクリックすると、edit-user-formにユーザーの詳細（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']);
  }
}
javascripttypescriptangularangular2-forms
8
mottosson

ngControl/ngFormControlとngModelを同時に使用できます。 Angular2ドキュメントから（ https://angular.io/docs/ts/latest/guide/forms.html ）：

  • 入力コントロールに値を読み書きするための[（ngModel）]構文による双方向データバインディング

  • ngControlを使用して、フォームコントロールの変更状態と有効性を追跡する

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

  • テンプレートのローカル変数を使用してコントロール間で情報を共有する

つまり、双方向バインディングが必要な場合はngModelを使用し、検証が必要な場合はngForm/ngFormControlを使用しますが、両方を組み合わせることができます。

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

どちらも変更を検出できます。

  • イベントngModelChange
  • 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>
12
Thierry Templier