angular - 如何解决角度 12 中的“TypeError:无法读取 null 的属性“值”错误?
问题描述
在我的 Angular 12 项目中,我创建了一个名为 customValidation 的服务,它应该处理密码模式,并确保在提交表单之前密码和确认密码都匹配。每次运行项目时,我都会从浏览器中收到一条错误消息,指出“TypeError:无法读取 null 的属性‘值’”,指向我创建的服务中的 matchPassword 函数。有人可以告诉我我错过了什么吗?
我的 customValidation.service.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,}$');
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 文件:
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!');
}
}
}
解决方案
验证器函数应该返回一个函数而不是一个对象{ passwordMismatch: true }
您的 matchPassword 应更改为:
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 };
};
}
推荐阅读
- pyomo - Pyomo KeyError:140624460880288
- javascript - 无法在 Ubuntu 20.04 上安装 json-server
- ubuntu - 如何使用 os ubuntu 通过 Putty 或 SSH 在 vps 上安装 WHM/Cpanel
- r - 为什么我无法使用 R 中的预测函数获得置信区间
- python - 如何在 python 中创建具有 3D 效果的半圆盘正交投影
- mysql - MySql Workbench 8.0.23 无法连接到旧的远程数据库
- python - 如何从表单 Django 引导页面
- javascript - 获取php中重复的相同id的div的name值
- javascript - 如何根据键对对象进行排序
- vert.x - vertx 中的 ScheduledExecutorService.scheduleWithFixedDelay 用法