Я сделал несколько директив маски в Angular 2, один из них - для почтового индекса. В основном он работает, но при загрузке данных в HTML он работает только тогда, когда фокус находится на входе, имеющем директиву. Я пробовал помещать различные события в хост, но никто не работал. Я пытался использовать изменения, ввод, но никто не работал.
HTML:
вход имеет директиву (название директивы: cep)
<div class="col-sm-4">
<div class="form-group fg-line">
<label for="cep">CEP</label>
<input type="text" class="form-control input-sm" id="cep" placeholder="CEP" required [(ngModel)]="empresa.Cep" borda-animada
cep maxlength="9" ngControl="cep" #cep="ngForm">
</div>
</div>
Директива:
import {Directive} from '@angular/core';
import {NgModel} from '@angular/common';
import {Mascaras} from '../core/mascaras'
@Directive({
selector: '[ngModel][cep]',
providers: [NgModel],
host: {
'(blur)': 'onInputChange($event)',
'(input)': 'onInputChange($event)'
}
})
export class CepDirective {
modelValue: string;
viewValue: string;
constructor(public model: NgModel) {}
onInputChange(event) {
console.log('teste ngmodelchange');
//event é o evento html que é disparado no evento blur
//por isso precisa pegar o target.value.
var newValue = Mascaras.cep(event.target.value);
this.model.valueAccessor.writeValue(newValue);
}
}
Если вы предоставляете NgModel
в директиве, он получает новый экземпляр, введенный вместо существующего.
Эта строка должна быть удалена:
providers: [NgModel],
Поле ввода маски в формах Angular2 показывает полный пример.
ControlValueAccessor
будет правильным подходом.