当我们使用Validators.compose()函数时,它返回的是一个ValidatorFn,而不是一个单一的ValidatorFn,这就导致hasValidator无法正确工作。因此,我们需要使用Validators.compose()函数返回的ValidatorFn中的validate()方法来手动调用hasValidator()。
以下是解决方法的示例代码:
import { Component } from '@angular/core';
import { FormControl, Validators, ValidatorFn } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
form = new FormGroup({
name: new FormControl('', Validators.compose([Validators.required, Validators.minLength(3)]))
});
hasMinLength = (control: FormControl) => this.getValidator(control, Validators.minLength);
getValidator = (control: FormControl, validator: ValidatorFn) =>
control.validator && control.validator(new FormControl()) && control.validator(new FormControl()).hasOwnProperty(validator.name);
}
在这个示例代码中,我们使用了一个自定义的hasMinLength函数,它会自动调用getValidator来判断name控件是否满足最小长度要求。getValidator函数会返回一个Boolean值,用于指示名字是否满足最小长度。这样我们就可以很容易地使用Validators.compose函数来验证表单了。