Как у меня может быть поле ввода с косой чертой, которое не может быть отредактировано, и все же позволяет пользователю вводить значения вокруг него? - PullRequest
Новая
       12

Как у меня может быть поле ввода с косой чертой, которое не может быть отредактировано, и все же позволяет пользователю вводить значения вокруг него?

0 голосов
/ 04 октября 2019

В моем приложении angular 7 мой HTML-файл имеет поля ввода для дат. Я использовал метод маскировки для включения автоматической косой черты всякий раз, когда пользователь вводит данные в поле ввода, однако это вызывает проблемы с моим настраиваемым валидатором для дат.

Новый подход, который я хотел бы попробовать, - это иметькосая черта, которую пользователь не может редактировать в поле ввода. Например, поле ввода предназначено для дат, следующих за форматом MM / DD / YYYY. Если пользователь не вводит никаких данных, поле ввода должно выглядеть следующим образом: __ / __ / ____ (исключая подчеркивания, они только для того, чтобы дать вам представление о том, чего я пытаюсь достичь.

Когда пользователь вводитзначения в поле ввода, оно должно выглядеть следующим образом: 01.01.2000. Если оно частично заполнено, оно должно выглядеть следующим образом: 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)
  }
...