时间戳

首页 > 解决方案 > 在邮政编码文本框中的 5 个字符后显示连字符 - 未按预期工作

html - 在邮政编码文本框中的 5 个字符后显示连字符 - 未按预期工作

问题描述

我需要在邮政编码文本框中的 5 个字符后显示连字符。输入超过 5 个字符时，会按预期显示连字符。但是，当用户手动输入连字符时，代码应自动删除手动添加的连字符。这没有按预期工作。手动添加的连字符不会被删除。当我在浏览器开发人员工具中调试打字稿代码时，我可以看到额外的连字符已从属性“zipCode”中删除，但该更改并未反映在 UI 中。

这是打字稿文件的代码：

export class AppComponent {  

  zipCode: string = '';

  public setValue(val: any) {
    if(val.indexOf('-') >= 0)
      val = val.replaceAll('-', '');
    if(val.length > 5)
      val = val.substr(0,5) + '-' + val.substr(5, val.length - 5);
    this.zipCode = val;
  }
}

这是html文件的代码：

<input type="text" name="zipField" [(value)] = "zipCode" (input)="setValue($event.target.value)">

有人可以让我知道为什么这段代码不起作用。另外，请建议任何替代方法来实现手动添加的额外连字符的删除。提前致谢。

标签： htmltypescriptangular8

解决方案

你应该传递元素本身，而不是单独value传递。input

这样您也可以更改input标签中的文本

<input type="text" name="zipField" [(value)] = "zipCode" (input)="setValue($event.target)">

然后在你的打字稿文件中

export class AppComponent {  
  ...

  public setValue(element: any) {
    let val = element.value;

    if(val.contains('-'))
      val = val.replaceAll('-', '');
    if(val.length > 5)
      val = val.substr(0,5) + '-' + val.substr(5, val.length - 5);

    this.zipCode = val;
    element.value = val;
  }
}

推荐阅读