在Angular中实现跨字段验证时,我们可以使用自定义验证器。下面是一个示例,假设我们需要验证密码和确认密码是否匹配:
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
passwordForm: FormGroup;
constructor() {
this.passwordForm = new FormGroup({
password: new FormControl('', [Validators.required]),
confirmPassword: new FormControl('', [Validators.required])
}, {validators: this.passwordMatchValidator});
}
passwordMatchValidator(form: FormGroup) {
if (form.get('password').value !== form.get('confirmPassword').value) {
form.get('confirmPassword').setErrors({passwordNotMatch: true});
} else {
form.get('confirmPassword').setErrors(null);
}
}
}
在FormGroup的options参数中,我们传入一个validators参数,它是一个自定义验证器函数passwordMatchValidator。如果验证失败,我们使用setErrors方法将表单控件的errors属性设置为一个包含验证错误的对象。