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

Question

我正在尝试输入字段 format/mask 值，同时让实际模型保留原始（或不同格式的）值。我在想 phone 数字等，但为了简单起见，我使用大写字母进行测试。

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

笨蛋：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>

Answer 1

老实说，我还在学习 angular2，而且技术还很不成熟，可以说这是最好的方法，但在尝试之后：

import {Directive, ElementRef, Output, EventEmitter} from '@angular/core';
import {NgFormControl} from '@angular/common';

@Directive({
  selector: '[uppercase]',
  host: {
    '(input)': 'onInputChange()',
  }
})

export class UppercaseDirective {

  @Output() onChange = new EventEmitter();
  rawValue: string = '';

  constructor(private model: NgFormControl, private elementRef: ElementRef) { }

  onInputChange() {
    let str = this.model.value;
    this.rawValue = this.rawValue.substring(0, str.length) + str.substring(this.rawValue.length, str.length);
    let newValue = this.rawValue.toUpperCase();
    this.model.viewToModelUpdate(newValue);
    this.model.valueAccessor.writeValue(newValue);
    this.onChange.emit(this.rawValue);
  }

}

那么你可以这样得到：

<input [ngFormControl]='myForm.controls.field' uppercase (onChange)="raw = $event">
<div>
   {{ raw }}
</div>

因为每当你更新模型时，变量都会改变。你要做的是分开。在你的 plnkr 中试过了，它成功了。

编辑：虽然哈哈

可能需要针对不同的场景做一些工作

Answer 2

尝试像这样直接更新控件引用：

onInputChange() {
  let newValue = this.model.value.toUpperCase();
  this.model.control.updateValue(newValue);
}

另见 plunker http://plnkr.co/edit/XYPWYgA8lbg2EdxPqzWj?p=preview

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

Angular 2 - Input mask: Input box display formatted value, while model retains unformatted value

angular2-forms

angular2-directives

angular