Проверка даты с использованием углового выбора даты материала - PullRequest
Новая
       25

Проверка даты с использованием углового выбора даты материала

0 голосов
/ 13 ноября 2018

Я пытаюсь проверить даты с помощью средства выбора даты материала. В частности, я пытаюсь проверить, когда пользователь вводит «abc» в поле даты, я хотел бы показать ему «пожалуйста, введите правильную дату». Я хотел бы иметь возможность делать это при нажатии клавиш, чтобы при вводе «a», «ab» и «abc» они получали ту же ошибку.

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

Можно ли это сделать?

1 Ответ

0 голосов
/ 13 ноября 2018

Вы можете прикрепить обработчик к dateChange, который запускается onChange поля ввода mat-datepicker и проверять ввод пользователя.

Вы также можете попробовать 'dateInput' mat-datepicker.

См. https://material.angular.io/components/datepicker/api#MatDatepickerInput

Обновление

HTML 

<input matInput [matDatepicker]="picker" placeholder="Input & change events"
     (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)" (keyup)="keyEvent('keyUp', $event)">

TS 

import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

    /** @title Datepicker input and change events */
    @Component({
      selector: 'datepicker-events-example',
      templateUrl: 'datepicker-events-example.html',
      styleUrls: ['datepicker-events-example.css'],
    })
    export class DatepickerEventsExample {
      events: string[] = [];

      addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
        this.events.push(`${type}: ${event.value}`);
      }

      keyEvent(type: string, event: KeyboardEvent) {
        this.events.push(`${type}: ${event.target.value}`);
      }
    }
...