Angular 5 pattern validation is not working with dynamic reactive forms

Question

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.

itsundefined itsundefined · Accepted Answer · 2018-11-12T22:20:56

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: ##.##.##.##
 })

Angular 5 pattern validation is not working with dynamic reactive forms

1 Answers