在Angular中,可以通过自定义验证器函数来实现参数化自定义验证。以下是一个示例解决方法:
customValidator
的函数,接受一个最小值参数,并返回一个验证器函数:function customValidator(minValue: number): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const value = control.value;
if (value < minValue) {
return { 'customError': { value } };
}
return null;
};
}
Validators.compose()
方法将自定义验证器与其他验证器(如必填验证器)结合起来。例如,我们创建一个名为ExampleForm
的表单,并将自定义验证器应用于一个名为customField
的表单控件:import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent {
exampleForm = this.fb.group({
customField: ['', Validators.compose([customValidator(10), Validators.required])]
});
constructor(private fb: FormBuilder) {}
}
在上面的示例中,customValidator(10)
将最小值设置为10,同时还应用了必填验证器。
这样,当用户输入的值小于10时,customField
控件将显示一个错误消息。
请注意,以上代码只是一个示例,您可以根据自己的需求进行修改和调整。