我需要一个检查是否email相等的验证Email Confirm。为此，我创建了一个自定义验证，看起来像
import { AbstractControl, ValidationErrors, FormGroup } from '@angular/forms';
export function ValidateEqual( equals: string ) {
return ( control: AbstractControl ): ValidationErrors | null => {
const equalsField = control.root.get( equals )
if ( equalsField ) {
equalsField.valueChanges.subscribe( value => {
console.log( 'observable fired', value );
// control.updateValueAndValidity( { onlySelf: true , emitEvent: false } );
} );
if ( control.value !== equalsField.value ) {
return { equals: true };
}
}
return null;
}
}
我的表格看起来像
this.loginForm = this.fb.group( {
password: [ '', [
Validators.required,
] ],
email: [ '', [
Validators.required,
Validators.email,
] ],
emailConfirm: [ '', [
Validators.required,
Validators.email,
ValidateEqual( 'email' ),
] ]
} );
因此，我通过字段来检查是否等于中的相等性ValidateEqual()。很好
以下情况失败：
1）
电子邮件：[email protected]
确认电子邮件：[email protected]
*现在，确认电子邮件中显示的错误不等于“电子邮件”。正确。
2）
*现在我更改email字段以匹配该confirm email字段。
电子邮件：[email protected]
确认电子邮件：[email protected]
*该confirm email字段上的错误不会消失，因为它不知道任何更改。
我遇到的问题是，我试图valueChanges在equals字段上使用observablecontrol来重新验证该字段，但是当我启用该字段时control.updateValueAndValidity()，每次按下按键时它都会按指数方式订阅，并且浏览器将崩溃。IT确实会通知该email confirm字段进行重新验证，因此它几乎可以正常工作。
有谁知道如何只让它订阅一次并使其重新验证该control字段而不再次订阅（又一次订阅）？
问题在于，显然只有在FormControl的值更改时才检查ValidatorFn放置在上的FormControl内容。我们要检查的是email或何时emailConfirm更改。为此，我们需要验证FormGroup而不是FormControl。因为aValidatorFn接收到AbstractControl，这意味着我们的函数可以接收FormGroup，FormControl或FormArray。
static matches(form: AbstractControl){
return form.get('email').value == form.get('emailConfirm').value ? null : {equals: true};
}
现在，在您的组件中，您仍然需要添加此验证器，它有所不同：
this.form = this.fb.group({...}, {validator: CustomValidator.matches});
如您所见，我们可以将第二个对象作为参数传递给该对象，该对象需要整个验证器 FormGroup
在您的模板中，您将检查整个表单而不是单个FormControl是否具有equals错误：
<div *ngIf="form.hasError('equals')">The emails don't match</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句