如何在 Angular 2 中的 ngx-mydatepicker 中添加文本掩码？答案

【问题标题】：How to add text-mask in ngx-mydatepicker in angular 2?如何在 Angular 2 中的 ngx-mydatepicker 中添加文本掩码？
【发布时间】：2018-02-14 07:25:08
【问题描述】：

我正在使用 ngx-mydatepicker 作为日期字段。我需要在该代码中添加文本掩码。当我尝试添加时，我收到一个错误，因为“多个自定义值访问器与具有未指定名称属性的表单控件匹配”。

现在如何添加文本掩码？我使用 angular2-text-mask npm 作为文本掩码。它适用于其他输入字段。但不在 ngx-mydatepicker 日期字段中

【问题讨论】：

标签： angular typescript

【解决方案1】：

我试图找出相同的问题，但是当我搜索错误时，我看到有人说，是 not able 来克服这个错误。因此，当您找不到解决问题的方法时，请始终使用原版。

解决方案：

在您的项目中添加蒙版助手

export function MaskedDate(event: any) {
  var v = event.target.value;
  if (v.match(/^\d{2}$/) !== null) {
    event.target.value = v + '/';
  } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
    event.target.value = v + '/';
}
}

在您的组件中：

import { MaskedDate } from './helpers/mask.helper';

在你的组件中声明属性：

  dateMask = MaskedDate;

在你的组件 html 中：

 <input style="float:none"  (keyup)="dateMask($event)" formControlName="birth_date"  placeholder="Select a date"  ngx-mydatepicker [options]="myOptions" #dp="ngx-mydatepicker"/>

您仍然可以将文本掩码与其他输入一起使用，没问题。

【讨论】：