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 (^\d{2}.\d{2}.\d{2}.\d{2}$) with regextester which works fine. I am not sure the what's going wrong here. Any help is much appreciated.
Here is the StackBlitz.
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 || null
}
}
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 /^\d{2}.\d{2}.\d{2}.\d{2}$/
Edit: Final form of model should be:
new TextboxQuestion({
key: 'version',
label: 'Release Number',
type: 'text',
required: true,
order: 4,
pattern: /^\d{2}.\d{2}.\d{2}.\d{2}$/ // needed format: ##.##.##.##
})
25.25.25.25 is not a valid number but it's of type text. Also I changed the pattern inside the service from '^\d{2}.\d{2}.\d{2}.\d{2}$' to /^\d{2}.\d{2}.\d{2}.\d{2}$/. Dunno why string does not work but regex does. Updated my answer.