角2指令与ngModel和ngControl
问题描述:
我想写一个角2指令,它应具有以下行为:角2指令与ngModel和ngControl
必须是可用的使用和不使用包装
<form [ngFormModel]="form">
应该使用
[(ngModel)]
用于数据绑定内部使用
Observer
,在最后一次用户输入发生后250ms内更新ngModel
当使用包装
<form [ngFormModel]="form">
应该可以监听form.valueChanges
(当然最后的用户输入后,应该解雇250毫秒)
我已经写了下面的指令来进行测试:
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
。
我在做什么错?或者是否有人有一些正在工作的示例代码?
在此先感谢!
答
我现在工作了!
这里是我的指令:
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
东西做,但它的工程!