Использование шаблона HTML5 с Angular

Question

У меня есть элемент даты в файле HTML моего компонента:

<input type="text" name="travelDate" 
    placeholder="Date YYYY-MM-DD" name="travelDate" class="form-control" 
    pattern="\d{4}/\d{1,2}/\d{1,2}" formControlName="travelDate">

<button class="btn btn-info" type="submit">Search</button>

Это просто текстовое поле, которое позволяет пользователю вводить значение даты, теперь я хочу ограничить его форматом YYYY-MM-DD, поэтомуЯ использую описанный выше шаблон.

Теперь, когда я ввожу какой-то случайный текст abc, а затем нажимаю кнопку отправки, я не получаю никаких предупреждений о том, что поле travelDate недопустимо.

Как использовать шаблон в HTML-файле углового компонента?

Answer 1

используйте Validator.pattern в Formcontrol следующим образом:

     myForm: FormGroup;

    this.myForm = this.fb.group({
      'travelDate': ['', Validators.pattern(/\d{4}/\d{1,2}/\d{1,2}/)]
    }) 

чтобы получить уведомление после отправки:

submit(){

    if(this.myForm.get('travelDate').invalid){
       alert('invalid date')
    }

}