Угловой 2 Директивы с ngModel и ngControl

Question

Я хочу написать Угловую 2 Директиву, которая должна иметь следующее поведение:

1. Должно быть полезными и без оберточной <form [ngFormModel]="form">

2. Если использовать [(ngModel)] для привязки данных

3. Внутренний номер Observer, который обновляет ngModel 250 мс после того, как произошел последний вход пользователя

4. При использовании упаковки <form [ngFormModel]="form"> должна быть возможность прослушивать form.valueChanges (которые, конечно, должны стрелять 250ms после последнего ввода данных пользователем)

---

я написал следующую директиву для тестирования:

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})); 
    } 
} 

Он работает при использовании нетngControl. Затем он говорит, что ни один провайдер для NgModel не найден.

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

Но когда я использую NgControl на конструктор метод this.model.control.updateValue не обновит ngModel.

---

Что я делаю неправильно? Или у кого-нибудь есть пример кода, который работает?

Заранее благодарен!

Answer 1

Теперь у меня это работает!

Вот моя директива:

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); 
    } 
} 

Я не имею понятия, что делает это bindings и NG_VALUE_ACCESSOR материал, но это работает!