我正在尝试输入输入字段格式/掩码值,同时让实际模型保留原始(或格式不同)的值.我正在考虑电话号码等,但为了简单起见,我使用大写字母进行测试.
我尝试了很多东西,希望它像指令一样简单.但似乎无法使显示值偏离表单值.
plunk：http://plnkr.co/edit/VH5zn4S8q28CBpFutBlx?p=preview
这是指令：
@Directive({
selector: '[uppercase]',host: {
'(input)': 'onInputChange()',}
})
export class UppercaseDirective {
constructor(private model: NgFormControl) { }
onInputChange() {
let newValue = this.model.value.toUpperCase();
this.model.viewToModelUpdate(newValue);
this.model.valueAccessor.writeValue(newValue);
}
}
和形式：
<form [ngFormModel]='myForm'>
<input [ngFormControl]='myForm.controls.field' uppercase>
<div>
{{ myForm.value.field }}
</div>
</form>
解决方法
尝试直接更新控件引用,如下所示：
onInputChange() {
let newValue = this.model.value.toUpperCase();
this.model.control.updateValue(newValue);
}
另见plunker http://plnkr.co/edit/XYPWYgA8lbg2EdxPqzWj?p=preview
