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

Posted 2023-02-22

【中文标题】Angular 2 - 输入掩码：输入框显示格式化值，而模型保留未格式化值

【英文标题】：Angular 2 - Input mask: Input box display formatted value, while model retains unformatted value

【发布时间】：2016-10-09 05:24:00

【问题描述】：

我试图在输入字段格式/掩码值时输入它们，同时让实际模型保留原始（或不同格式的）值。我在考虑电话号码等，但为简单起见，我使用大写字母进行测试。

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

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>

【问题讨论】：

为什么不用管道？听起来您只是想要一种不同的文本显示方式。

我希望在输入框中进行格式化 - 输入掩码。我只是出于测试目的在视图中显示值。

【参考方案1】：

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

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

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

【讨论】：

有道理。谢谢。我试图让模型值和显示值不同，但你的回答给了我答案：plnkr.co/edit/VH5zn4S8q28CBpFutBlx?p=preview

【参考方案2】：

说实话，我还在学习 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 中尝试过，它成功了。

编辑： 不过可能需要针对不同的场景做一些工作哈哈

【讨论】：

谢谢埃德。不过，我想要实现的是让表单模型包含原始值。

@Steve 这可能会让你感兴趣***.com/questions/37800841/…