CODEWITHSUNDEEP
angularangular-reactive-formsangular-forms
Justin Young
Justin Young

Reputation: 2463

How do I get this custom validator to work?

Having trouble with a custom validator pattern. The essential elements for a successful validation should be 1) At least 1 number at the beginning 2) a space after the number/numbers 3) At least 1 alpha character that represents the street name. Anything appended beyond that should still validate as true. 

this.myForm = this.fb.group({
      street:['',[Validators.required, Validators.pattern(/^\d+\s*[a-zA-Z].*$/ig)]],
      city:['',Validators.required],
      state: ['', Validators.required],
      zip:['',Validators.required],
      notes:[''],
    })

44 North Road #12 validates but 44 North Road #123 Does not. Essentially after I type in 44 North Road every other character typed in (no matter what it is) makes the it fail validation until a subsequent character is entered and then fails again as the next character is typed. It just ping pongs back and forth between invalid and valid as I add characters.

What am I doing wrong?

Upvotes: 1

Views: 22

Answers (1)

theblindprophet
theblindprophet

Reputation: 7927

I believe your regex is a little off. Here is a simpler expression that matches your criteria:

^\d+\ [A-Za-z].*$
  • \d+: one digit
  • \ (space afteer \): space
  • [A-Za-z]: one alpha character
  • .* anything else

You can see it in action here, where I added capture groups around your 3 specific criteria.

Upvotes: 1

Related Questions