Conditional pattern to be used along with required Angular7/8

Question

In my template driven form the textarea is required based on a condtion. I would also like the pattern to be conditional. I tried this syntax based on a question from angular 1.x but it doesn't seem to work. - pattern=" condition ? '.*[^ ].*' : ''" I also tried - pattern="condition ? (\s*[^\s]+\s*)+ : .*". is this possible with the later versions of Angular? Here is my stack blitz: https://stackblitz.com/edit/conditionalpattern

RTYX · Accepted Answer · 2019-10-16T14:49:50.270

2

I think if you want to pass an expression, you should wrap pattern in square brackets. But more importantly, you cannot use the attribute pattern in the tag textarea, because pattern is not an allowed attribute for textarea.

As described in MDN Web Docs,

You can't provide specific regexs to validate the value against using the pattern attribute, like you can with the input element

So in your case I would either use an input or consider using a CustomValidator. If you use an input, make sure to wrap the expression in brackets:

<input type="text" [pattern]="condition ? pattern : noPattern">

Here's a tiny stackblitz with a working example of an input field.

edited Oct 16 '19 at 14:49

answered Oct 16 '19 at 14:23

RTYX

1,244
1
14
32

Thanks running some test now. I didn't realize pattern is not allowed in the text area – Flash Oct 16 '19 at 14:45
@Flash Happy to help. I added a stackblitz in case you find it useful. – RTYX Oct 16 '19 at 14:50

score 1 · Answer 2 · answered Oct 16 '19 at 15:03

1

u want to pass any expression ? try this: <-input type="text" [pattern]="condition ? pattern : noPattern" >

answered Oct 16 '19 at 15:03

Annas

35
4

Thanks I was hoping to use it for a texarea – Flash Oct 16 '19 at 15:11

Conditional pattern to be used along with required Angular7/8

2 Answers2