要实现组合验证,需要使用Angular Forms中的Validators.compose()
方法。例如,如果我们想要对一个表单控件进行必填验证和最小长度验证,可以按照以下方式编写代码:
在component.ts文件中:
import { Component } from '@angular/core';
import { FormControl, Validators, FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
'myControl': new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(5)
])
)
});
}
onSubmit() {
console.log(this.myForm);
}
}
在template.html文件中:
注意,Validators.compose()
方法接受一个包含多个验证器函数的数组,返回一个单一的验证器函数。在以上示例中,我们将Validators.required
和Validators.minLength(5)
组合在一起,创建了一个组合验证器函数。如果表单控件的值为空或长度小于5,则触发验证错误。如果验证通过,则在控制台中记录表单的值。