Я хочу изменить значения ввода (force) во время ввода с использованием директивы атрибута. С его помощью я хотел бы создавать директивы, такие как прописные, строчные, maxlength, filterchar и т.д., Которые будут использоваться для полей ввода в формах. Я нашел этот пример: Angular 2 Директива атрибута Typescript Пример, но это, похоже, не работает. Возможно, это было сделано для более ранней сборки Angular2. Это именно то, что я хотел бы сделать.
Когда я создаю такую директиву:
import {Directive} from 'angular2/core';
import {NgModel} from 'angular2/common';
@Directive({
selector: '[ngModel][uppercase]',
host: {
'(input)' : 'onInputChange()'
}
})
export class UppercaseDirective{
constructor(public model:NgModel){}
onInputChange(){
var newValue = this.model.value.toUpperCase();
this.model.valueAccessor.writeValue(newValue);
this.model.viewToModelUpdate(newValue);
}
}
И используйте его в форме, подобной этой:
<input type="text" class="form-control" [(ngModel)]="field.name" ngControl="name" #name="ngForm" required uppercase>
(и зарегистрировать NgModel
в качестве поставщика). Я получаю
undefined this.model.value.
Я могу использовать $event.target.value = $event.target.value.toUpperCase()
(при передаче $event
с помощью onInputChange()
) и который работает для представления (он показывает ввод как заглавный. Но он не обновляет поле привязки "field.name".
Итак, как создать директиву атрибута Angular2, который делает это?
- EDIT -
После некоторого дальнейшего расследования мне удалось получить то, что я хочу. Ответ, предоставленный Гюнтером, ближе к моему первоначальному намерению и, возможно, лучше. Но вот другой способ:
import {Directive, Input, Output, EventEmitter} from 'angular2/core';
@Directive({
selector: '[ngModel][uppercase]',
host: {
"(input)": 'onInputChange($event)'
}
})
export class UppercaseDirective{
@Output() ngModelChange:EventEmitter<any> = new EventEmitter()
value: any
onInputChange($event){
this.value = $event.target.value.toUpperCase()
this.ngModelChange.emit(this.value)
}
}
Как я уже сказал, я не уверен, что это также хороший способ сделать это, поэтому комментарии приветствуются.