角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。

我在做什麼錯？或者是否有人有一些正在工作的示例代碼？

在此先感謝！

來源

2016-03-08 Benjamin M

我現在工作了！

這裏是我的指令：

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東西做，但它的工程！

來源

2016-03-10 15:22:31

角2指令與ngModel和ngControl

回答

相關問題