Angular 2 New forms API how to validate with a regular expression

Question

I have a plunkr here. How can I get the Submit button to be disabled till the dob is in mm/dd/yyyy pattern?

Here's the form

 <form [formGroup]="flashyForm">
    <input formControlName="dob" pattern="^\d{2}\/\d{2}\/\d{4}$"  placeholder="Date of Birth">
  <button type="submit" [disabled]="!flashyForm.valid">Submit</button>
</form>

I am not have it working yet, but you should put the pattern on the input (i am just checking it now with required) and i also think you are missing flashyForm.form.valid — raphaëλ
– raphaëλ, Commented Jul 19, 2016 at 15:50

pawankumar meshram · Accepted Answer · 2016-07-19 17:54:53Z

1

You can try pattern="^(0[1-9]|1[0-2])/(0[1-9]|1[0-2])/([0-9]{4})$". Customize year as per your need.

answered Jul 19, 2016 at 17:54

pawankumar meshram

554 bronze badges

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

Comments

Günter Zöchbauer · Accepted Answer · 2016-07-19 15:21:29Z

0

Pattern needs to be a string like

pattern="\d{2}\/\d{2}\/\d{4}"

^ and $ are added automatically. I don't remember if \ need to be escaped as \\, but I guess so.

See also https://github.com/angular/angular/issues/10150

answered Jul 19, 2016 at 15:21

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

3 Comments

Maximilian Riegler Over a year ago

It also needs to be on the input tag, I guess.

Günter Zöchbauer Over a year ago

You're right. Didn't even see that :D That has to be a copy-past error or something.

Günter Zöchbauer Over a year ago

@user6123723 have you tried it? Any different behavior or errors?

Collectives™ on Stack Overflow

Angular 2 New forms API how to validate with a regular expression

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related