Директива Angular 2 с ngModel и ngControl

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

  1. Должен использоваться с оберткой и без нее <form [ngFormModel]="form">

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

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

  4. При использовании обертки <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.

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

Заранее спасибо!


typescript angular angular2-forms angular2-directives angular2-template
person Benjamin M    schedule 08.03.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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, но это работает!

person Benjamin M    schedule 10.03.2016