Приложение Angular7, предотвращает перемещение курсора в конец поля ввода, когда пользователь удаляет число. Нет JQuery

Question

В моем приложении angular 7 у меня есть специальный валидатор, который проверяет даты, которые пользователи вводят в поле ввода, тип поля ввода - текст, и он должен оставаться как текст. У меня также есть метод маскировки, который будет вводить автослэш, когда пользователь вводит числа. Один для ММ / ДД / ГГГГ, другой для ММ / ГГГГ.

Все хорошо, за исключением того, что когда пользователь удаляет числа в середине поля ввода, курсор перемещается в конец поля вводавместо того, чтобы оставаться на месте.

Одно предостережение в том, что мы не можем использовать jquery.

Мой настраиваемый валидатор для MM / DD / YYYY:

    static dateFormatDDMMYY(control: AbstractControl) {
    const isValid = (/^\d{2}\/\d{2}\/\d{4}$/).test(control.value);
    if (isValid) {
      const temp = control.value.split('/');
      const d = new Date(temp[2] + '/' + temp[0] + '/' + temp[1]);
      const year = temp[2]
      const currentYear = new Date().getFullYear();

      const result = (d && (d.getMonth() + 1) == temp[0] && d.getDate() == Number(temp[1]) && d.getFullYear() == Number(temp[2]));
      const currentDate: any = new Date();
      if (result && (d < currentDate.setHours(0, 0, 0, 0)) && (currentYear >= Number(year)+8)) {
        return null;
      }
    }
    return { pastMonthFormat: true };
}

Мой настраиваемый валидатордля ММ / ГГГГ:

  static pastMonthYearFormat(control: AbstractControl) {
    const isValid = (/^\d{2}\/\d{4}$/).test(control.value);
    if (isValid) {
      const splitValue = control.value.split('/');
      const month = splitValue[0];
      const year = splitValue[1];

      const currentYear = new Date().getFullYear();
      const currentMonth = new Date().getMonth() + 1;

    if (
      (Number(month) && Number(year) && Number(month) <= 12) &&
      ((currentMonth >= Number(month) &&
        currentYear >= Number(year)) ||
        currentYear > Number(year))) {
      return null;
    } else {
      return { pastMonthFormat: true };
    }
  }
  return { pastMonthFormat: true };
}

Мой метод маскирования для ММ / ДД / ГГГГ:

  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];
  }

Мой метод маскирования для ММ / ГГГГ:

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

Мой HTML для ММ / ГГГГ

        <input
          maxlength=7
          formControlName="parentsNotSingleDate"
          placeholder="MM/YYYY"
          id="parentsNotSingleDate"
          type="text"
          class="form-control col-8"
          (input)="maskInputDateMMYYYY($event)"
        >

Мой HTML для ММ / ДД / ГГГГ

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

Мы пытаемся добиться того, чтобы пользователь мог вносить изменения во входные данныеполе, без перемещения курсора в конец строки.