Блог

Главная - Вопросы по программированию - Как я могу решить ошибку «Ошибка типа: не удается прочитать свойство «значение » нулевой» ошибки в угловом 12?

Как я могу решить ошибку «Ошибка типа: не удается прочитать свойство «значение » нулевой» ошибки в угловом 12?

#angular #typescript

Вопрос:

В моем проекте angular 12 я создал службу под названием customValidation, которая должна обрабатывать шаблон для пароля, а также обеспечивать соответствие пароля и подтверждения пароля до отправки формы. Каждый раз, когда я запускаю проект, я получаю сообщение об ошибке «Ошибка типа: Не удается прочитать свойство» значение «null» из моего браузера, указывающее на функцию matchPassword в сервисе, который я создал. Может кто-нибудь сказать мне, что я пропустил?

Мое пользовательское подтверждение.код сервиса.ts:

 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,}

Мой файл registration.component.ts:


 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!');
    }
  }
}

Комментарии:

1. У вас есть null с ! возврат действителен ? ноль! : { Неверный пароль: истина };

2. @Божиновски, я не понимаю. Будьте добры, объясните.

Ответ №1:

Вы password неправильно написали при объявлении passwordControl на вашем сервисе.

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

Следует изменить на

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

Комментарии:

1. Спасибо, что заметили это. Извините за поздний ответ.

Ответ №2:

Функция валидатора должна возвращать функцию вместо объекта { passwordMismatch: true }

Ваш пароль соответствия должен быть изменен на что-то вроде:

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

У меня похожий сценарий, это валидатор паролей:

 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 };
  };
}

);
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 };
}
}
}
Мой файл registration.component.ts:



Комментарии:




1.  У вас есть null с !   возврат действителен ?   ноль!   : { Неверный пароль: истина };  


2.  @Божиновски, я не понимаю.   Будьте добры, объясните.  



Ответ №1:




Вы  password  неправильно написали при объявлении  passwordControl  на вашем сервисе.




Следует изменить на






Комментарии:




1.  Спасибо, что заметили это.   Извините за поздний ответ.  



Ответ №2:




Функция валидатора должна возвращать функцию вместо объекта  { passwordMismatch: true }  


Ваш пароль соответствия должен быть изменен на что-то вроде:




У меня похожий сценарий, это валидатор паролей:




















	Метки: