Angular 2 – 输入掩码：输入框显示格式化值,而模型保留未格式化

发布时间：2020-12-17 17:35:18 所属栏目：安全来源：网络整理

导读：我正在尝试输入输入字段格式/掩码值,同时让实际模型保留原始(或格式不同)的值.我正在考虑电话号码等,但为了简单起见,我使用大写字母进行测试. 我尝试了很多东西,希望它像指令一样简单.但似乎无法使显示值偏离表单值. plunk：http://plnkr.co/edit/VH5zn4S8q2

我正在尝试输入输入字段格式/掩码值,同时让实际模型保留原始(或格式不同)的值.我正在考虑电话号码等,但为了简单起见,我使用大写字母进行测试.

我尝试了很多东西,希望它像指令一样简单.但似乎无法使显示值偏离表单值.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!