Form Validation from service.ts Angular

Question

I need to add custom validators to a form from formvalidation.service.ts
form.component.ts

myForm = this.formBuilder.group({
    name: ['', [Validators.required,]]
});

formvalidator.service.ts

passwordValidator(): ValidatorFn {
   return (control: AbstractControl): {[key: string]:any} | null => {
     const year = control.value;
     if (!/[0-9]/.test(year) || !/[A-Z]/.test(year)) {
       return { passwordPattern: true};
     }
     return null;
   }
}

I import it as FormValidator.passwordValidator(). It can't import this to the component.ts file. But when the static passwordValidator(): ValidatorFn {} it can do. but my superviser advice me to not to use static methods.

Answer 1

You need service class instance in form.component:

export class FormComponent {
  ...
  constructor(private validator: FormValidatorService) {}
  myForm = this.formBuilder.group({
    name: ['', [Validators.required, this.validator.passwordValidator]]
  });
  ...
  
}

Answer 2

You can not import as FormValidator.passwrodValidator, but you can inject the service in the constructor of your component and use

constructor(private formValidator:FormValidator){}
//and use
name:['',this.formValidator.passwordValidator]

The another option is declare the function outside the service (but in the same .ts)

export function passwordValidator(): ValidatorFn {..}

Then you can import {passwordValidator} from './services/service.ts'