在Angular中,可以通过自定义验证器函数来实现模板驱动表单的自定义验证。下面是一个示例解决方案:
import { AbstractControl, ValidatorFn } from '@angular/forms';
export function customValidator(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
const forbidden = ... // 自定义验证逻辑,返回true表示验证不通过
return forbidden ? { 'customError': { value: control.value } } : null;
};
}
import { Component } from '@angular/core';
import { customValidator } from './custom-validator';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
myValue: string;
customError = customValidator();
}
通过以上步骤,你就可以实现Angular模板驱动表单的自定义验证了。在自定义验证器函数中,可以使用自定义的验证逻辑,并返回相应的验证结果。在模板中,可以根据验证结果显示错误消息。