Using HTML5 pattern with Angular

Question

I have a date element in my component HTML file:

<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>

It is just a text field that allows the user to enter date value, now I want to restrict that to format YYYY-MM-DD so I am using the above pattern.

Now when I enter some random text abc and then click the submit button I am not getting any alert message saying the travelDate field is not valid.

How to use pattern in Angular component HTML file?

Ghoul Ahmed · Accepted Answer · 2019-06-22 21:34:34Z

1

use Validator.pattern in Formcontrol like this:

     myForm: FormGroup;

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

to get alert after submitting:

submit(){

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

}

answered Jun 22, 2019 at 21:34

Ghoul Ahmed

4,8342 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using HTML5 pattern with Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related