我有一组复选框,如果没有复选框被选中,我想禁用提交按钮,如果至少有一个复选框被选中,我想激活提交按钮。最简单的方法是什么?
在HTML中:
<form [formGroup]="driverForm " (ngSubmit)="onSubmit()">
<div formGroupName="categoryLicense">
<label for="A1">A1</label>
<input id="A1" type="checkbox" formControlName="A1" (input)="setSubmit($event)" />
<label for="A2">A2</label>
<input id="A2" type="checkbox" formControlName="A2" (input)="setSubmit($event)" />
<label for="A">A</label>
<input id="A" type="checkbox" formControlName="A" (input)="setSubmit($event)" />
//Others inputs...
</div>
<button type="submit" [disabled]="!checkboxSelected">Submit</button>
</form>
在类型脚本中:
checkboxSelected = false;
driverForm = new FormGroup({
// Others variables..
categoryLicense: new FormGroup({
A1: new FormControl(false),
A2: new FormControl(false),
A: new FormControl(false),
B1: new FormControl(false),
B: new FormControl(false),
BE: new FormControl(false),
C1: new FormControl(false),
C1E: new FormControl(false),
C: new FormControl(false),
CE: new FormControl(false),
D1: new FormControl(false),
D1E: new FormControl(false),
D: new FormControl(false),
DE: new FormControl(false),
}),
});
setSubmit(e: any) {
// code to implement
}
我想我可以使用验证器,但是我不太确定如何在这样的上下文中使用它们。
1条答案
按热度按时间dsekswqp1#
您可以使用验证器来执行此检查。
您的验证器可能类似于:
然后在表单组的定义上:
然后有几种方法可以检查FormGroup是否有效。您可以检查FormGroup对象的invalid或valid属性,也可以通过errors属性或hasErrors()函数检查它是否有任何错误。