web-dev-qa-db-fra.com

Angular 2 Directive d'entrée Modification de la valeur de contrôle du formulaire

J'ai une simple directive Angular 2 qui modifie la valeur d'entrée d'un champ de texte. Notez que j'utilise l'approche de formulaire pilotée par modèle.

@Directive({
  selector: '[appUpperCase]'
})
export class UpperCaseDirective{

  constructor(private el: ElementRef, private control : NgControl) {

  }

  @HostListener('input',['$event']) onEvent($event){
    console.log($event);
    let upper = this.el.nativeElement.value.toUpperCase();
    this.control.valueAccessor.writeValue(upper);

  }

}

Le dom est mis à jour correctement, mais le modèle est mis à jour après chaque frappe. Jetez un coup d'œil au plnkr

angularangular2-formsangular2-directives
10
Mike Lunn

Cela me fait frémir parce que je l’ai rencontré plus tôt et qu’il me restait à me gratter la tête.

Pour revenir sur le problème, vous devez modifier votre this.control.valueAccessor.writeValue(upper) où ControlValueAccessor écrit explicitement dans l'élément DOM et non dans le contrôle lui-même pour appeler

 this.control.control.setValue(upper);

qui modifiera la valeur sur le contrôle et sera correctement reflété à la fois sur la page et dans la propriété du contrôle . https://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor-interface .html

Un ControlValueAccessor résume les opérations d'écriture d'une nouvelle valeur à un élément DOM représentant un contrôle d'entrée.

Voici un fichier déplacé: http://plnkr.co/edit/rllNyE07uPhUA6UfiLkU?p=preview

23
silentsod

Je cherchais quelque chose comme cela, mais lorsque j'ai essayé le code de mon projet, des erreurs se produisaient sur la ligne this.el.nativeElement.value.toUpperCase (), conformément à l'exemple de travail ci-dessus donné par @silentsod.

J'ai modifié le code pour:

let str:string = this.control.value;
this.control.control.setValue(str.toUpperCase());

Voici un fichier déplacé: http://plnkr.co/edit/uf6udp7mQYmnKX6hGppR?p=preview

0
gocasco