web-dev-qa-db-fra.com

Angular 2, définir la valeur des entrées de texte sous forme

J'essaye donc quelques Angular 2 et j'aime ça jusqu'à présent. Mais j'ai besoin d'aide pour naviguer dans ce nouveau paysage.

J'ai un formulaire pour modifier les détails d'un utilisateur et une liste sur le côté avec tous mes utilisateurs. Lorsque je clique sur l'un des utilisateurs de la liste, je souhaite remplir mon formulaire de modification d'utilisateur avec les détails de l'utilisateur (setEditForm (utilisateur)).

Je l'ai fait fonctionner et tout. Mais je dois dire que ce n'est pas tout à fait correct d'utiliser simultanément ngControl et ngModel. Mais c'est peut-être ...

Est-ce la bonne façon de procéder ou est-ce que j'ai juste de la chance de le faire fonctionner?

@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

Bien sûr, vous pouvez utiliser ngControl/ngFormControl et ngModel en même temps. De la documentation Angular2 ( https://angular.io/docs/ts/latest/guide/forms.html ):

  • liaison de données bidirectionnelle avec la syntaxe [(ngModel)] pour lire et écrire des valeurs dans les contrôles d'entrée

  • à l'aide de ngControl pour suivre l'état de modification et la validité des contrôles de formulaire

  • affichage des erreurs de validation aux utilisateurs et activation/désactivation des contrôles de formulaire

  • partage d'informations entre les contrôles avec des variables locales de modèle

En bref, j'utiliserais ngModel si j'ai besoin d'une liaison bidirectionnelle et ngForm/ngFormControl si j'ai besoin d'une validation mais vous pouvez mélanger les deux.

Si vous n'avez besoin d'obtenir des valeurs et des notifications que lorsque les valeurs d'entrée sont mises à jour, ngControl/ngFormControl` est suffisant ...

Les deux permettent de détecter les changements:

  • Événement ngModelChange
  • Abonnez-vous sur ctrl.valueChanges

Vous pouvez configurer la liaison bidirectionnelle pour ngModel pour vos éléments de formulaire:

<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