CODEWITHSUNDEEP
regexangulartypescriptangular-reactive-forms
heisenberg
heisenberg

Reputation: 1312

Reactive forms regex.test is not a function

I have a model that uses reactive forms and keeps giving me the error of regex.test is not a function.

The model is the following:

import { date, email, maxDate, maxLength, minDate, minLength, pattern, prop, required } from "@rxweb/reactive-form-validators";

export class UserInfo {

  @required()
  public firstName: string;

  @required()
  public lastName: string;

  @pattern({expression: {pattern: /(^\+?[\d\W-/]{4,16}$)/ } })
  @minLength({value: 4})
  public phoneNumber: string;

}

And the error 

ERROR TypeError: regex.test is not a function
    at Function.isValid (reactive-form-validators.js:719)
    at reactive-form-validators.js:3418
    at forms.js:1155
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:1151)
    at RxFormControl.validator (forms.js:1096)
    at RxFormControl._runValidator (forms.js:3438)
    at RxFormControl.updateValueAndValidity (forms.js:3399)
    at new FormControl (forms.js:3843)
    at new RxFormControl (reactive-form-validators.js:2017)

happens when on the component I'm doing on the ngOnInit(): 

this.baseForm = this.formBuilder.formGroup(this.user) as RxFormGroup;

What is even stranger is that it only happens when I actually have data on the phoneNumber. If my phoneNumber is empty it works perfectly.

I even tested the following:

this.user.phoneNumber = "";
this.baseForm = this.formBuilder.formGroup(this.user) as RxFormGroup;

And this works. What is even stranger to me is that I did a small example on stackblitz and there it also works without any problem even with data.

Upvotes: 0

Views: 673

Answers (2)

heisenberg
heisenberg

Reputation: 1312

I've find out a solution and it was the following:

this.baseForm = this.formBuilder.formGroup(this.user) as RxFormGroup;
    (this.baseForm .controls.phoneNumber as FormControl)
      .addValidators(
        [TextValidator.regexMatchValidator(new RegExp(/(^\+?[\d\W-/]{4,16}$)/), "error message")]);

basically add a validator after the form initialization

Upvotes: 0

Ushmi Dave
Ushmi Dave

Reputation: 286

It is working in my machine, please check the below image :

enter image description here

If you have sample not working example of pattern then please share the same

Upvotes: 1

Related Questions