CODEWITHSUNDEEP
angulartypescript
Vintage Farms
Vintage Farms

Reputation: 64

How can i solve a 'TypeError: Cannot read property 'value' of null' error in angular 12?

In my angular 12 project, I created a service called customValidation which should handle the pattern for password and to also ensure that both password and confirm password matches before the form is submitted. Each time I run the project, I get an error which says "TypeError: Cannot read property 'value' of null" from my browser, pointing to the matchPassword function in the service which I created. Can someone tell me what I missed?

My customValidation.service.ts code:

export class CustomvalidationService {
  constructor() {}

  patternValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (!control.value) {
        return null!;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(control.value);
      return valid ? null! : { invalidPassword: true };
    };
  }

  matchPassword(c: AbstractControl): { [key: string]: any } {
    let passwordControl = c.get(['passowrd']);
    let confrimPasswordControl = c.get(['cPassword']);

    if (passwordControl!.value !== confrimPasswordControl!.value) {
      return { passwordMismatch: true };
    } else {
    return { passwordMismatch: false };
  }
 }
}

My registration.component.ts file:

export class userRegisterComponent implements OnInit {
  aino: number = new Date().getFullYear();

  registerForm!: FormGroup;
  submitted = false;

  fname = new FormControl('', [Validators.required]);
  email = new FormControl('', [Validators.required, Validators.email]);
  password = new FormControl('', Validators.compose([Validators.required, this.customvalidator.patternValidator]));
  cPassword = new FormControl('', Validators.compose([Validators.required, this.customvalidator.matchPassword]));
  uPass = new FormControl('', [Validators.required]);


  constructor(
    public authService: AuthService,
    private customvalidator: CustomvalidationService
  ) {}

  ngOnInit(): void {
    this.registerForm = new FormGroup({});
  }

  // function to submit the registration form

  onRegister() {
    this.submitted = true;
    if (this.registerForm.valid) {
      alert(
        'Form submitted successfully! \n Check the values in the browser console'
      );
      this.authService.SignUp('email.value', 'password.value');
      console.table(this.registerForm.value);
    } else {
      alert('Please fill all fields. Thank you!');
    }
  }
}

Upvotes: 0

Views: 1207

Answers (2)

huan feng
huan feng

Reputation: 8623

Validator function should return a function instead of an Object { passwordMismatch: true }

Your matchPassword should be changed to something like:

 matchPassword(...) {
    return (group: AbstractControl): ValidationErrors | null => {...};
 }

I have a similar scenario, this is the password much validator:

import { AbstractControl, ValidationErrors } from '@angular/forms';

// custom validator to check that two fields match
export function MustMatch(controlName: string, matchingControlName: string) {
  return (group: AbstractControl): ValidationErrors | null => {
    const control = group.get(controlName);
    const matchingControl = group.get(matchingControlName);

    return control.value === matchingControl.value ? null : { notSame: true };
  };
}

Upvotes: 1

Joshua McCarthy
Joshua McCarthy

Reputation: 1852

You have password misspelled when declaring passwordControl in your service.

let passwordControl = c.get(['passowrd']);

Should be changed to

let passwordControl = c.get(['password']);

Upvotes: 1

Related Questions