Question

我有反应形式的输入（材料2）。而且我知道在这个输入上加上时间掩码（hh：mm）的更好方法。或者我如何为此建立指令？

<div class="col-md-2 hours">
  <label for="floating-placeholder">Horário</label>
  <div>
    <input class="col-md-5 end" matInput placeholder="hh:mm" value="" name="end" minlength="4" maxlength="4" formControlName="start">
    às
    <input class="col-md-5 end" matInput placeholder="hh:mm" value=""  name="end" formControlName="end">
  </div>
</div>

Answer 1

这就是我解决这个问题的方法：

首先我安装此模块：https://www.npmjs.com/package/angular2-text-mask2

然后，我在组件ts中创建一个自定义掩码

public maskTime = [/[1-9]/, /\d/,':',/\d/, /\d/]

最后，我将指令放在输入

中

  <div class="col-md-2 hours">
    <label for="floating-placeholder">Horário</label>
    <div>
      <input type="text" [textMask]="{mask: maskTime, guide: false}" class="col-md-5 end" matInput placeholder="hh:mm" value="" name="end"  formControlName="start">às
      <input type="text" [textMask]="{mask: maskTime, guide: false}" class="col-md-5 end" matInput placeholder="hh:mm" value=""  name="end" formControlName="end">
    </div>
  </div>

Answer 2

使用标准HTML输入类型作为时间值。

<input class="col-md-5 end" matInput name="end" formControlName="start" type="time">

有关详细信息，请参阅MDN docs。

角度输入时间掩码

2 个答案: