Error occur while adding custom validation in Reactive Forms in Ionic

Question

I have been trying to add custom validation in Reactive Forms in ionic but when i add it then it gives error.

My form validation code:

this.loginForm = this.formBuilder.group({
  username: [
    "",
    [Validators.required, this.validationService.regExUsername],
  ],
  password: [
    "",
    [Validators.required, this.validationService.regExsPassword],
  ],
});

My validation service code:

regExUsername = "^[\\w_.@][\\w_.@-]*$";
regExPassword ="^[A-Za-z0-9[\\]\\!\\@\\#\\^\\(\\)\\+\\=\\è\\é\\à\\ù\\ò\\_\\-\\*\\$]*$";

Error I got:

       core.js:6241 ERROR Error: Uncaught (in promise): TypeError: v is not a function
       TypeError: v is not a function
       at forms.js:1599
       at Array.map (<anonymous>)
       at _executeValidators (forms.js:1595)
       at FormControl.validator (forms.js:1537)
       at FormControl._runValidator (forms.js:4347)
       at FormControl.updateValueAndValidity (forms.js:4308)
       at new FormControl (forms.js:4920)
       at FormBuilder.control (forms.js:9481)
       at FormBuilder._createControl (forms.js:9541)
       at forms.js:9520
       at resolvePromise (zone-evergreen.js:798)
       at resolvePromise (zone-evergreen.js:750)
       at zone-evergreen.js:860
       at ZoneDelegate.invokeTask (zone-evergreen.js:399)
       at Object.onInvokeTask (core.js:41645)
       at ZoneDelegate.invokeTask (zone-evergreen.js:398)
       at Zone.runTask (zone-evergreen.js:167)
       at drainMicroTaskQueue (zone-evergreen.js:569)  

I am not able to figure out what is the issue. If someone knows then please let me know. Thanks

Answer 1

It can be resolved by making some changes in validation code for username and password, as below:

  username: new FormControl(
    "",
    Validators.compose([
      Validators.required,
      Validators.pattern(this.validationService.regExUsername),
    ])
  ),
  password: new FormControl(
    "",
    Validators.compose([
      Validators.required,
      Validators.pattern(this.validationService.regExsPassword),
    ])