angulaire 2 Directive avec ngModel et ngControl

Question

Je veux écrire une directive 2 angulaire, ce qui devrait avoir le comportement suivant:

1. Doit être utilisable avec et sans enveloppe <form [ngFormModel]="form">

2. Si utiliser [(ngModel)] pour la liaison de données

3. Utilisez un Observer interne, qui met à jour les ngModel 250ms après la dernière entrée de l'utilisateur est arrivé

4. Lorsque vous utilisez un emballage <form [ngFormModel]="form"> il devrait être possible d'écouter form.valueChanges (qui bien sûr doit tirer 250ms après la dernière entrée de l'utilisateur)

---

J'ai écrit la directive suivante pour le test:

import {Directive, EventEmitter, Input, Output} from 'angular2/core' 
import {NgModel} from 'angular2/common' 
import {Observable} from 'rxjs/Observable' 

@Directive({ 
    selector: '[queryDirective]' 
}) 
export class QueryDirective { 
    constructor(public model:NgModel) {} 

    ngOnInit() { 
     this.model.control.valueChanges 
      .debounceTime(250) 
      .subscribe(val => this.model.control.updateValue(val,{emitEvent:true})); 
    } 
} 

Il fonctionne lors de l'utilisation pasngControl. Il dit ensuite qu'aucun fournisseur pour NgModel peut être trouvé.

<form [ngFormModel]="form"> 
    <input queryDirective ngControl="..." type="text" [(ngModel)]="..."> 
</form> 

Mais quand je l'utilise NgControl sur le constructeur de la méthode this.model.control.updateValue ne sera pas mise à jour du ngModel.

---

Qu'est-ce que je fais mal? Ou quelqu'un a-t-il un exemple de code qui fonctionne?

Merci d'avance!

Answer 1

Je l'ai maintenant fonctionné!

Voici ma directive:

import {Directive, Renderer, ElementRef, forwardRef, Provider} from 'angular2/core' 
import {NG_VALUE_ACCESSOR, DefaultValueAccessor} from 'angular2/common' 
import {CONST_EXPR} from 'angular2/src/facade/lang' 
import {Observable} from 'rxjs/Observable' 

const PROVIDER = CONST_EXPR(new Provider(NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => QueryDirective), multi: true})); 

@Directive({ 
    selector: '[queryDirective]', 
    bindings: [PROVIDER] 
}) 
export class QueryDirective extends DefaultValueAccessor { 
    constructor(_renderer: Renderer, private el: ElementRef) { 
     super(_renderer, el); 
    } 

    ngOnInit() { 
     Observable.fromEvent(this.el.nativeElement, 'keyup') 
      .map(val => this.el.nativeElement.value) 
      .debounceTime(this.timeout) 
      o.subscribe(this.onChange); 
    } 
} 

Je n'ai aucune idée ce que ce genre de choses bindings et NG_VALUE_ACCESSOR fait, mais ça marche!