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, Nov 06 '17 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, Nov 06 '17 at 15:02

Poul Kruijt · Accepted Answer · 2017-11-07T07:04:25.003

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.

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 07 '17 at 07:04

answered Nov 06 '17 at 13:59

Poul Kruijt

69,713
12
145
149

@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? – Poul Kruijt Nov 06 '17 at 18:24
I use doule quotes actually – IntoTheDeep Nov 06 '17 at 18:26
can you please help me to solve this https://stackoverflow.com/questions/52091334/password-validation-is-not-working-in-angular-5 @PierreDuc – Zhu Aug 30 '18 at 08:35

score 2 · Answer 2 · answered Nov 06 '17 at 14:00

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)]));

Angular 4 pattern validation from component

2 Answers2