如何在一个输入字段中包含一个不能编辑的斜杠，并且仍然允许用户在其周围输入值？

Question

在我的angular 7应用程序中，我的HTML文件具有日期输入字段。每当用户在输入字段中键入内容时，我就一直使用掩蔽方法包括自动斜杠，但是，这会导致我的日期自定义验证程序出现问题。

我想尝试的一种新方法是使用斜线表示用户无法在输入字段中进行编辑。例如，输入字段用于遵循MM / DD / YYYY格式的日期。如果用户不输入任何数据，则输入字段应看起来像__ / __ / ____（不包括下划线，这些只是为了让您了解我要实现的目标。

当用户在输入字段中输入值时，它应该看起来像这样 2000年1月1日。如果它已部分填充，则其外观应为01 / __ / 2000。

希望我以大家都能理解的方式表达我的问题，如有需要，我可以进一步澄清。

我当前用于该输入的HTML如下：

        <input 
          required 
          maxlength=10 
          formControlName="parentOneDob" 
          type="text" 
          placeholder="MM/DD/YYYY" 
          class="form-control" 
          id="parentOneDob"
          (input)="maskInputDate($event)"
        >

我的遮罩方法是：

  maskInputDate(e) {
    const t = e.target.value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,2})(\d{0,4})/);
    e.target.value = t[2] ? t[1] + '/' + t[2] + (t[3] ? '/' + t[3] : '') : t[1];
    console.log('DATE VALUE: ', e.target.value)
  }