Reactive forms regex.test is not a function

Question

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.

FYI: always place the literal - in a character class at the start or end: [\d\W\/-]. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Sep 1, 2019 at 10:41
@WiktorStribiżew I've also tried that, but I ended up with the same problem — heisenberg
– heisenberg, Commented Sep 1, 2019 at 10:48
@WiktorStribiżew I've created a new instance, mapped by hand, nothing — heisenberg
– heisenberg, Commented Sep 1, 2019 at 15:29

Ushmi Dave · Accepted Answer · 2019-09-02 08:54:42Z

1

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

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

answered Sep 2, 2019 at 8:54

Ushmi Dave

2861 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

heisenberg Over a year ago

it also works on the example I've made on stackblitz, I don't know why it does not on my solution

Ushmi Dave Over a year ago

@heisenberg No Problem, It's working in my local machine. The provided screenshot is not stackblitz runing example. Interesting issue, I would like to deep dive into it if you provide some more details on this

Ushmi Dave Over a year ago

@heisenberg Would be great if we can use stackoverflow chat room or rxweb gitter chat channel

heisenberg Over a year ago

I don't know how to open a chat room :D if you want we can do it, just start it eheh

Ushmi Dave Over a year ago

@heisenberg I don’t know how to create a chat room, Can you please come on gitter : gitter.im/rxweb-project/rxweb

heisenberg · Accepted Answer · 2019-09-09 14:07:30Z

0

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

answered Sep 9, 2019 at 14:07

heisenberg

1,3126 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

Reactive forms regex.test is not a function

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related