Angular 4 pattern validation from component

Question

I am not able to bind variable from component as a pattern with Angular 4. This code works:

<textarea #sss="ngModel"
    class="form-control"
    id="sss"
    maxlength="350"
    pattern="[a-zA-Z '-,;.]*"
    [(ngModel)]="formModel.sss" name="sss"></textarea>

But when I try to add something like:

export class SssComponent {
    public sssPattern: string = "[a-zA-Z '-,;.]*";

and add it like that:

<textarea #sss="ngModel"
    class="form-control"
    id="sss"
    maxlength="350"
    pattern="sssPattern"
    [(ngModel)]="formModel.sss" name="sss"></textarea>

it don't. Also tried variations like:

[pattern]="sssPattern"
[pattern]={{sssPattern}}
pattern={{sssPattern}}

with no success. Angular 4

Shouldn't it be a RegExp? public sssPattern: RegExp = /^[a-zA-Z ',;.-]*$/; (or something like that)? — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Nov 6, 2017 at 13:58
Well, just mind that you need to anchor the pattern manually if you are not using Validators and that - in between chars in a character class creates a range (so, it must be at the end or start of the character class). — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Nov 6, 2017 at 15:02

Poul Kruijt · Accepted Answer · 2017-11-07 07:04:25Z

3

~~You have to use attr.pattern, because pattern is an attribute with no reflection from a property:~~

<textarea [attr.pattern]="sssPattern"></textarea>

Interpolation and property binding can set only properties, not attributes.

You need attribute bindings to create and bind to such attributes.

Attribute binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix attr, followed by a dot (.) and the name of the attribute. You then set the attribute value, using an expression that resolves to a string.

~~read more~~

You cannot use pattern on a textarea. Angular does have its own PatternValidator, which means all that nonsense I said about attr does not hold up for this specific case, but I believe this does not work on a textarea, because textarea itself does not contain the pattern attribute in standard HTML5, as opposed to the input element.

In order to use a pattern on a textarea, you should create a CustomValidator

edited Nov 7, 2017 at 7:04

answered Nov 6, 2017 at 13:59

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

3 Comments

Poul Kruijt Over a year ago

@TeodorKolev are you using single quotes here? '[a-zA-Z '-,;.]*', because that would be a syntax error.. You have to escape the single quote inside the regex. Do you have any error coming up?

IntoTheDeep Over a year ago

I use doule quotes actually

Zhu Over a year ago

can you please help me to solve this stackoverflow.com/questions/52091334/… @PierreDuc

Prithivi Raj · Accepted Answer · 2017-11-06 14:00:45Z

2

If you use Angular Forms, below code can be used for field and pattern validation

let emailFormat = "[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}";
let nameFormat = "[a-zA-Z\s]+$";

this.name = new FormControl("", Validators.compose([Validators.required, Validators.pattern(nameFormat)]));
this.email = new FormControl("", Validators.compose([Validators.required, Validators.pattern(emailFormat)]));

answered Nov 6, 2017 at 14:00

Prithivi Raj

2,7361 gold badge22 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular 4 pattern validation from component

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related