Angular 5 pattern validation is not working with dynamic reactive forms
I am trying to achieve field validation with angular reactive forms with regex pattern ##.##.##.##. For some patterns, it is not working. I tried the below input 12.25.36.25 which fails the validation, tested the pattern (^d2.d2.d2.d2$) with regextester which works fine. I am not sure the what's going wrong here. Any help is much appreciated.
Here is the StackBlitz.
angular typescript edited Nov 12 '18 at 23:57
Joel
1,5686719
asked Nov 12 '18 at 22:03
PraveenPraveen
208212
add a comment |
I am trying to achieve field validation with angular reactive forms with regex pattern ##.##.##.##. For some patterns, it is not working. I tried the below input 12.25.36.25 which fails the validation, tested the pattern (^d2.d2.d2.d2$) with regextester which works fine. I am not sure the what's going wrong here. Any help is much appreciated.
Here is the StackBlitz.
angular typescript edited Nov 12 '18 at 23:57
Joel
1,5686719
asked Nov 12 '18 at 22:03
PraveenPraveen
208212
add a comment |
I am trying to achieve field validation with angular reactive forms with regex pattern ##.##.##.##. For some patterns, it is not working. I tried the below input 12.25.36.25 which fails the validation, tested the pattern (^d2.d2.d2.d2$) with regextester which works fine. I am not sure the what's going wrong here. Any help is much appreciated.
Here is the StackBlitz.
angular typescript edited Nov 12 '18 at 23:57
Joel
1,5686719
asked Nov 12 '18 at 22:03
PraveenPraveen
208212
I am trying to achieve field validation with angular reactive forms with regex pattern ##.##.##.##. For some patterns, it is not working. I tried the below input 12.25.36.25 which fails the validation, tested the pattern (^d2.d2.d2.d2$) with regextester which works fine. I am not sure the what's going wrong here. Any help is much appreciated.
Here is the StackBlitz.
angular typescript angular typescript edited Nov 12 '18 at 23:57
Joel
1,5686719
asked Nov 12 '18 at 22:03
PraveenPraveen
208212
edited Nov 12 '18 at 23:57
Joel
1,5686719
asked Nov 12 '18 at 22:03
PraveenPraveen
208212
edited Nov 12 '18 at 23:57
Joel
1,5686719
edited Nov 12 '18 at 23:57
Joel
1,5686719
edited Nov 12 '18 at 23:57
Joel
1,5686719
1,5686719
asked Nov 12 '18 at 22:03
PraveenPraveen
208212
asked Nov 12 '18 at 22:03
PraveenPraveen
208212
asked Nov 12 '18 at 22:03
PraveenPraveen
208212
208212
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The reason is you forgot to add a field in class question-base called pattern.
Here is the code:
export class QuestionBase<T>
...
pattern: string;
constructor(options:
...
pattern?: string
= )
...
this.pattern = options.pattern
Another problem is that ##.##.##.## is not a valid number. You need to change that input to be of type text. Lastly if your pattern is a regular expression you need to use javascript's regex type instead of string. Replace your pattern to be /^d2.d2.d2.d2$/
Edit: Final form of model should be:
new TextboxQuestion(
key: 'version',
label: 'Release Number',
type: 'text',
required: true,
order: 4,
pattern: /^d2.d2.d2.d2$/ // needed format: ##.##.##.##
)
answered Nov 12 '18 at 22:20
itsundefineditsundefined
8512524
thank you for pointing it out but it dint worked
– Praveen
Nov 12 '18 at 22:33
I did two more changes that I forgot to mention.25.25.25.25is not a valid number but it's of typetext. Also I changed the pattern inside the service from'^d2.d2.d2.d2$'to/^d2.d2.d2.d2$/. Dunno why string does not work but regex does. Updated my answer.
– itsundefined
Nov 12 '18 at 22:39
the requirement is i dont want user to enter the text/characters in the input element and the reason i am accessing the pattern from other file is, pattern will be varied based on the user logged-in and account type he has access to.
– Praveen
Nov 12 '18 at 22:50
Added more code to make it clear on how I made it work.
– itsundefined
Nov 12 '18 at 22:52
1
All changed code is in the answer but I also saved the link if you want to see a working example.stackblitz.com/edit/angular-dkrrhs-8cdzcz
– itsundefined
Nov 13 '18 at 0:15
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270758%2fangular-5-pattern-validation-is-not-working-with-dynamic-reactive-forms%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The reason is you forgot to add a field in class question-base called pattern.
Here is the code:
export class QuestionBase<T>
...
pattern: string;
constructor(options:
...
pattern?: string
= )
...
this.pattern = options.pattern
Another problem is that ##.##.##.## is not a valid number. You need to change that input to be of type text. Lastly if your pattern is a regular expression you need to use javascript's regex type instead of string. Replace your pattern to be /^d2.d2.d2.d2$/
Edit: Final form of model should be:
new TextboxQuestion(
key: 'version',
label: 'Release Number',
type: 'text',
required: true,
order: 4,
pattern: /^d2.d2.d2.d2$/ // needed format: ##.##.##.##
)
answered Nov 12 '18 at 22:20
itsundefineditsundefined
8512524
thank you for pointing it out but it dint worked
– Praveen
Nov 12 '18 at 22:33
I did two more changes that I forgot to mention.25.25.25.25is not a valid number but it's of typetext. Also I changed the pattern inside the service from'^d2.d2.d2.d2$'to/^d2.d2.d2.d2$/. Dunno why string does not work but regex does. Updated my answer.
– itsundefined
Nov 12 '18 at 22:39
the requirement is i dont want user to enter the text/characters in the input element and the reason i am accessing the pattern from other file is, pattern will be varied based on the user logged-in and account type he has access to.
– Praveen
Nov 12 '18 at 22:50
Added more code to make it clear on how I made it work.
– itsundefined
Nov 12 '18 at 22:52
1
All changed code is in the answer but I also saved the link if you want to see a working example.stackblitz.com/edit/angular-dkrrhs-8cdzcz
– itsundefined
Nov 13 '18 at 0:15
|
show 1 more comment
The reason is you forgot to add a field in class question-base called pattern.
Here is the code:
export class QuestionBase<T>
...
pattern: string;
constructor(options:
...
pattern?: string
= )
...
this.pattern = options.pattern
Another problem is that ##.##.##.## is not a valid number. You need to change that input to be of type text. Lastly if your pattern is a regular expression you need to use javascript's regex type instead of string. Replace your pattern to be /^d2.d2.d2.d2$/
Edit: Final form of model should be:
new TextboxQuestion(
key: 'version',
label: 'Release Number',
type: 'text',
required: true,
order: 4,
pattern: /^d2.d2.d2.d2$/ // needed format: ##.##.##.##
)
answered Nov 12 '18 at 22:20
itsundefineditsundefined
8512524
thank you for pointing it out but it dint worked
– Praveen
Nov 12 '18 at 22:33
I did two more changes that I forgot to mention.25.25.25.25is not a valid number but it's of typetext. Also I changed the pattern inside the service from'^d2.d2.d2.d2$'to/^d2.d2.d2.d2$/. Dunno why string does not work but regex does. Updated my answer.
– itsundefined
Nov 12 '18 at 22:39
the requirement is i dont want user to enter the text/characters in the input element and the reason i am accessing the pattern from other file is, pattern will be varied based on the user logged-in and account type he has access to.
– Praveen
Nov 12 '18 at 22:50
Added more code to make it clear on how I made it work.
– itsundefined
Nov 12 '18 at 22:52
1
All changed code is in the answer but I also saved the link if you want to see a working example.stackblitz.com/edit/angular-dkrrhs-8cdzcz
– itsundefined
Nov 13 '18 at 0:15
|
show 1 more comment
The reason is you forgot to add a field in class question-base called pattern.
Here is the code:
export class QuestionBase<T>
...
pattern: string;
constructor(options:
...
pattern?: string
= )
...
this.pattern = options.pattern
Another problem is that ##.##.##.## is not a valid number. You need to change that input to be of type text. Lastly if your pattern is a regular expression you need to use javascript's regex type instead of string. Replace your pattern to be /^d2.d2.d2.d2$/
Edit: Final form of model should be:
new TextboxQuestion(
key: 'version',
label: 'Release Number',
type: 'text',
required: true,
order: 4,
pattern: /^d2.d2.d2.d2$/ // needed format: ##.##.##.##
)
answered Nov 12 '18 at 22:20
itsundefineditsundefined
8512524
The reason is you forgot to add a field in class question-base called pattern.
Here is the code:
export class QuestionBase<T>
...
pattern: string;
constructor(options:
...
pattern?: string
= )
...
this.pattern = options.pattern
Another problem is that ##.##.##.## is not a valid number. You need to change that input to be of type text. Lastly if your pattern is a regular expression you need to use javascript's regex type instead of string. Replace your pattern to be /^d2.d2.d2.d2$/
Edit: Final form of model should be:
new TextboxQuestion(
key: 'version',
label: 'Release Number',
type: 'text',
required: true,
order: 4,
pattern: /^d2.d2.d2.d2$/ // needed format: ##.##.##.##
)
answered Nov 12 '18 at 22:20
itsundefineditsundefined
8512524
edited Nov 12 '18 at 22:52
answered Nov 12 '18 at 22:20
itsundefineditsundefined
8512524
answered Nov 12 '18 at 22:20
itsundefineditsundefined
8512524
answered Nov 12 '18 at 22:20
itsundefineditsundefined
8512524
8512524
thank you for pointing it out but it dint worked
– Praveen
Nov 12 '18 at 22:33
I did two more changes that I forgot to mention.25.25.25.25is not a valid number but it's of typetext. Also I changed the pattern inside the service from'^d2.d2.d2.d2$'to/^d2.d2.d2.d2$/. Dunno why string does not work but regex does. Updated my answer.
– itsundefined
Nov 12 '18 at 22:39
the requirement is i dont want user to enter the text/characters in the input element and the reason i am accessing the pattern from other file is, pattern will be varied based on the user logged-in and account type he has access to.
– Praveen
Nov 12 '18 at 22:50
Added more code to make it clear on how I made it work.
– itsundefined
Nov 12 '18 at 22:52
1
All changed code is in the answer but I also saved the link if you want to see a working example.stackblitz.com/edit/angular-dkrrhs-8cdzcz
– itsundefined
Nov 13 '18 at 0:15
|
show 1 more comment
thank you for pointing it out but it dint worked
– Praveen
Nov 12 '18 at 22:33
I did two more changes that I forgot to mention.25.25.25.25is not a valid number but it's of typetext. Also I changed the pattern inside the service from'^d2.d2.d2.d2$'to/^d2.d2.d2.d2$/. Dunno why string does not work but regex does. Updated my answer.
– itsundefined
Nov 12 '18 at 22:39
the requirement is i dont want user to enter the text/characters in the input element and the reason i am accessing the pattern from other file is, pattern will be varied based on the user logged-in and account type he has access to.
– Praveen
Nov 12 '18 at 22:50
Added more code to make it clear on how I made it work.
– itsundefined
Nov 12 '18 at 22:52
1
All changed code is in the answer but I also saved the link if you want to see a working example.stackblitz.com/edit/angular-dkrrhs-8cdzcz
– itsundefined
Nov 13 '18 at 0:15
thank you for pointing it out but it dint worked
– Praveen
Nov 12 '18 at 22:33
thank you for pointing it out but it dint worked
– Praveen
Nov 12 '18 at 22:33
I did two more changes that I forgot to mention.
25.25.25.25 is not a valid number but it's of type text. Also I changed the pattern inside the service from '^d2.d2.d2.d2$' to /^d2.d2.d2.d2$/. Dunno why string does not work but regex does. Updated my answer.– itsundefined
Nov 12 '18 at 22:39
I did two more changes that I forgot to mention.
25.25.25.25 is not a valid number but it's of type text. Also I changed the pattern inside the service from '^d2.d2.d2.d2$' to /^d2.d2.d2.d2$/. Dunno why string does not work but regex does. Updated my answer.– itsundefined
Nov 12 '18 at 22:39
the requirement is i dont want user to enter the text/characters in the input element and the reason i am accessing the pattern from other file is, pattern will be varied based on the user logged-in and account type he has access to.
– Praveen
Nov 12 '18 at 22:50
the requirement is i dont want user to enter the text/characters in the input element and the reason i am accessing the pattern from other file is, pattern will be varied based on the user logged-in and account type he has access to.
– Praveen
Nov 12 '18 at 22:50
Added more code to make it clear on how I made it work.
– itsundefined
Nov 12 '18 at 22:52
Added more code to make it clear on how I made it work.
– itsundefined
Nov 12 '18 at 22:52
1
1
All changed code is in the answer but I also saved the link if you want to see a working example.stackblitz.com/edit/angular-dkrrhs-8cdzcz
– itsundefined
Nov 13 '18 at 0:15
All changed code is in the answer but I also saved the link if you want to see a working example.stackblitz.com/edit/angular-dkrrhs-8cdzcz
– itsundefined
Nov 13 '18 at 0:15
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270758%2fangular-5-pattern-validation-is-not-working-with-dynamic-reactive-forms%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
