Angular simple pattern validation question

Question

I have a very simple Angular pattern like this:

<div>
    <input [(ngModel)]="testField" name="testField" #testFieldN="ngModel" required pattern="[a-zA-Z]+" />
    <div *ngIf="testFieldN.invalid"
         class="alert alert-danger">
      <div *ngIf="testFieldN.errors?.pattern">
        Title is invalid.
      </div>
      <div *ngIf="testFieldN.errors?.required">
        Title is required.
      </div>
    </div>
  </div>

I expect that testField should have at least one alphabetical character. This means value like "One11" should be accepted. However, if I enter that value, the pattern error kicked off and shows "Title is invalid."

Can someone point out what is wrong? Also, I expect when the filed is empty, the pattern error should be kicked off, but it is not. Why is that?

To make it clear, this is how I test my pattern and it matches "One11": Demo

Alexey Soshin · Accepted Answer · 2019-01-30 08:35:22Z

3

Your pattern allows only alphabetical characters, and not numbers, for example. If you want something that accepts numbers, try:

[0-9]*[a-zA-Z]{1,}[0-9]*

It's basically:

0 or more numbers
at least 1 character of A-z
0 or more numbers

edited Jan 30, 2019 at 8:35

answered Jan 29, 2019 at 20:38

Alexey Soshin

17.9k2 gold badges37 silver badges42 bronze badges

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

4 Comments

tala9999 Over a year ago

I believe we use javascript regular expression syntax for Angular, right? So if I only want alphabetical characters, the pattern should be "^[a-zA-Z]+$". Am I wrong?

Alexey Soshin Over a year ago

Your pattern doesn't allow numbers at all.

tala9999 Over a year ago

Alexey, so what is the pattern that allows at least one alphabetical character?

tala9999 Over a year ago

Alexey, thanks but I don't think it's what I wanted. Can you suggest an expression that accepts a string with at least one alphabetical character? And is it a javascript regular expression?

Collectives™ on Stack Overflow

Angular simple pattern validation question

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related