Как отформатировать вводимые пользователем данные во вводе mat-datepicker?

Question

Когда пользователь вводит числовую c дату, такую ​​как 03151989, во входные данные, я хотел бы, чтобы она автоматически форматировалась до 15.03.1989 по мере ввода.

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

Я пытался изменить тип ввода на сегодняшний день, но это вызывает проблемы с mat-datepicker, и я получаю ошибка:

Указанное значение «3/15/1989» не соответствует требуемому формату «гггг-ММ-дд».

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

У sh angular материал мог бы решить эту проблему, но даже на их странице документации он, кажется, не форматируется, а также позволяет вводить буквы и другие символы.

Вот пример кода, с которым я работаю:

   <mat-form-field class="form-element span-1-2">
    <mat-label>Test *</mat-label>
    <input
      matInput
      [matDatepicker]="datePicker"
      formControlName="test"
      type="date"
    />
    <mat-datepicker-toggle
      matSuffix
      [for]="datePicker"
    ></mat-datepicker-toggle>
    <mat-datepicker #datePicker></mat-datepicker>
  </mat-form-field>

Answer 1

Вы можете назначить входу идентификатор, изменить тип обратно на текст, а затем использовать vanilla javascript для таргетинга на вход, применять желаемый формат при вводе и ограничивать только числами.

    <input id="dateInput" matInput [matDatepicker]="datePicker" formControlName="test" 
type="text" />

Посмотрите этот код, я думаю, он достигает нужного вам формата: https://codepen.io/tutsplus/pen/KMWqRr