[英]Cannot read property “*******”' of undefined
我正在尝试创建自定义验证以匹配密码和 ConfirmPassword。
但我得到了错误。
我是 angular 的新手。 请忽略我的无知。
创建自定义验证以匹配密码和确认密码是个好主意吗? 还是有更好的出路?
这是代码。 请帮忙
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl, ValidatorFn, ValidationErrors, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-sample-form',
templateUrl: './sample-form.component.html',
styleUrls: ['./sample-form.component.scss']
})
export class SampleFormComponent implements OnInit {
formattedMessage: string;
passMatch: Boolean;
formValid: boolean;
constructor() { }
ngOnInit() {
this.onChanges();
}
sample: FormGroup = new FormGroup({
inpt: new FormControl(null, Validators.required),
pass: new FormControl("", Validators.required),
cpass: new FormControl("", [Validators.required, this.passwordMatch]),
iagree: new FormControl(null, Validators.nullValidator)
});
onChanges(): void {
this.sample.valueChanges.subscribe(val => {
console.log("======================================");
console.log("PASS : " + this.sample.controls.pass.value);
console.log("CPASS : " + this.sample.controls.cpass.value);
if (this.sample.controls.pass.value == this.sample.controls.cpass.value) {
this.passMatch = true;
console.log("MATCHED");
} else {
this.passMatch = false;
console.log("MIS-MATCHED");
}
this.formValid = this.sample.valid;
console.log("PASS MATCH : " + String(this.passMatch));
console.log("FORM VALID : " + String(this.formValid));
});
}
passwordMatch(group: FormGroup): ValidationErrors | null {
let pass = group.controls.pass.value;
let confirmPass = group.controls.cpass.value;
return pass === confirmPass ? null : { notSame: true }
}
sumbit() {
}
}
我收到此错误:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'pass' of undefined
TypeError: Cannot read property 'pass' of undefined
at passwordMatch (sample-form.component.ts:51)
at forms.js:1480
at Array.map (<anonymous>)
at _executeValidators (forms.js:1476)
at FormControl.validator (forms.js:1418)
at FormControl._runValidator (forms.js:4089)
at FormControl.updateValueAndValidity (forms.js:4050)
at new FormControl (forms.js:4656)
at new SampleFormComponent (sample-form.component.ts:25)
at createClass (core.js:31985)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
-阿什什
您需要绑定passwordMatch
匹配 function 因为 angular 会在不同的上下文中调用它
尝试
cpass: new FormControl("", [Validators.required, this.passwordMatch.bind(this)]),
代替
cpass: new FormControl("", [Validators.required, this.passwordMatch]),
更新答案:
您需要同时绑定passwordMatch
方法并使用通用验证器在单独的表单组中添加pass
和cpass
,如下所示:
sample = new FormGroup({
inpt: new FormControl(null, Validators.required),
iagree: new FormControl(null, Validators.nullValidator),
confirmPasswordForm: new FormGroup({
pass: new FormControl('', Validators.required),
cpass: new FormControl('', Validators.required),
}, {
validator: this.passwordMatch.bind(this),
})
});
但是您需要在 html 中创建嵌套表单
您正在将验证器分配给 formControl cpass,因此您将通过 arguments 获得的 formControl 只是 cpass。 该验证器需要父级别能够访问两个控件(通过和 cpass)。 试试这个:
sample: FormGroup = new FormGroup({
inpt: new FormControl(null, Validators.required),
pass: new FormControl("", Validators.required),
cpass: new FormControl("", [Validators.required]),
iagree: new FormControl(null, Validators.nullValidator)
}, {validators: [this.passwordMatch]});
这应该够了吧。 错误将出现在示例表单组中,而不是在 formControl 中,我认为这是有道理的,因为它会影响多个表单控件。
这实际上解决了问题。 使用关键字“root”
passwordMatch(control: AbstractControl): ValidationErrors | null {
const pass = control.root.get('pass');
const cpass = control.root.get('cpass');
if (pass != null && cpass != null) {
console.log("Pass : ", pass.value);
console.log("cpass : ", cpass.value);
if (pass.value != cpass.value) {
console.log("MISMATCH");
return { PasswordMismatch: 'Password Mismatch' }
} else {
console.log("MATCH");
return null;
}
} else {
console.log("MISMATCH2");
return { PasswordMismatch: 'Password Mismatch' };
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.