可以使用Angular自带的FormsModule和ReactiveFormsModule来实现下拉菜单的验证,并通过设置相应的事件来控制验证的显示时间。
在模板中定义下拉菜单,并使用required属性进行验证:
请选择一个选项
在组件中定义验证表单:
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
options = ['选项一', '选项二', '选项三'];
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
selectedOption: new FormControl('', Validators.required)
});
}
}
在模板中使用formControlName进行绑定,通过判断控件的错误状态和触摸状态来控制验证信息的显示时间。
下一篇:Angular-下拉选择列表为空