在 Angular 中验证单选按钮时,使用 @angular/forms
库的 Validators.requiredTrue
是一个常见的做法。例如:
HTML 代码:
Typescript 代码:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
template: `...`,
})
export class AppComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
myRadio: ['', Validators.requiredTrue],
});
}
}
需要注意的是,由于单选按钮的值可能是字符串,所以必须设置空字符串作为默认值。同时,touch
事件也很重要,因为它将启用 myForm.get('myRadio').touched
的状态,并显示验证错误信息。
以上代码应该可以解决单选按钮验证不起作用的问题。