[英]Angular4: Form invalid despite no errors in fields (using custom validation)
我正在尝试使用自定义验证来验证表单。 出于某种原因,我必须构建一个可以更改电子邮件或设置新密码的表单。 出于这个原因,我不能使用 Validators.required 因为只有在触摸密码字段时才需要输入密码。
我的问题是,当输入验证得到解决时,表单仍然无效。
我做了一个 plnkr 来证明我的问题:
http://plnkr.co/edit/obF4gC5RHkXOOlCEsIuH?p=preview
ngOnInit(): void {
this.emailField = new FormControl('mail@mail.com', Validators.email);
this.pw1 = new FormControl('', [this.passwordAreEqualValidator, Validators.minLength(2)]);
this.pw2 = new FormControl('', this.passwordAreEqualValidator);
this.pwOld = new FormControl('', this.notEmptyIfNewIsTouchedValidator);
this.form = this.formBuilder.group({
pw1: this.pw1,
pw2: this.pw2,
emailField: this.emailField,
pwOld: this.pwOld
});
}
notEmptyIfNewIsTouchedValidator(control: FormControl) : ValidationErrors | null {
if (control.dirty) {
if (control.value === '') {
return {
oldPasswordEmpty: true
}
}
const parent = control.parent,
pw1 = parent.get('pw1'),
pw2 = parent.get('pw2');
// this will trigger nothing in template, this part is only
// to mark form invalid if password was entered. passwordNew1
// cannot be false by default as this is okay when you only
// want to change your e-mail adress.
if (pw1.value.length === 0) {
pw1.setErrors({noPassword: true});
} else {
if (pw1.hasError('noPassword')) {
let pw1Errors = pw1.errors;
delete pw1Errors.noPassword;
pw1.setErrors(pw1Errors);
}
}
console.log('pw1 errors: ', pw1.errors);
console.log('pw2 errors: ', pw2.errors);
console.log('old errors: ', control.errors);
}
return null;
}
passwordAreEqualValidator(control: FormControl): ValidationErrors | null {
if (control.dirty) {
const
parent = control.parent,
pwOld = parent.get('pwOld'),
pw1 = parent.get('pw1'),
pw2 = parent.get('pw2');
if (pwOld.value === '') {
pwOld.setErrors({oldPasswordEmpty: true})
}
if (pw1.value !== pw2.value) {
return {
notEqual: true
};
} else {
let pw1Errors = pw1.errors;
if (pw1.hasError('notEqual')) {
delete pw1Errors.notEqual;
pw1.setErrors(pw1Errors);
}
if (pw1.hasError('noPassword')) {
delete pw1Errors.noPassword;
pw1.setErrors(pw1Errors);
}
pw2.setErrors(null);
console.log('pw1 errors: ', pw1.errors);
console.log('pw2 errors: ', pw2.errors);
console.log('old errors: ', pwOld.errors);
}
}
return null;
}
重现步骤:
为什么我的表格无效?
PS:一旦我再次编辑我的pw1,我的表格就有效了,尽管错误的结果没有改变。
您在两个字段上都设置了Validator .....当您输入pw2时,pw1不会重新验证,所以pw1仍然无效,直到您返回并再次键入它为止。
在您的组件中,在ngOnInit的末尾,您可以添加以下内容....
this.pw1.valueChanges().subscribe(() => this.pw2.updateValueAndValidity());
this.pw2.valueChanges().subscribe(() => this.pw1.updateValueAndValidity());
该答案仅与无效但没有错误的表单问题有关,而不是对已识别问题的答案。
我正在创建子表单; 我的基础FormGroup
将FormGroups
和FormArray
s 作为组件。
this.form = this.formBuilder.group({
name: FormControl('', []),
addresses: this.formBuilder.array([
this.formBuilder.group({
street: FormControl('', []),
city: FormControl('', []),
state: FormControl('', []),
zip: FormControl('', []),
}),
this.formBuilder.group({
street: FormControl('', []),
city: FormControl('', []),
state: FormControl('', []),
zip: FormControl('', []),
}),
]),
phone: FormControl('',[]),
});
我在子表单中收到错误,特别是在FormGroup
的FormArray
中,但顶级表单没有显示任何错误。 我不得不查看FormGroup
中的FormArray
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.