html 如果在一组复选框中至少有一个复选框在Angular (14+)中被选中,如何启用按钮?

yk9xbfzb  于 2022-12-16  发布在  Angular
关注(0)|答案(1)|浏览(110)

我有一组复选框,如果没有复选框被选中,我想禁用提交按钮,如果至少有一个复选框被选中,我想激活提交按钮。最简单的方法是什么?

在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
 }

我想我可以使用验证器,但是我不太确定如何在这样的上下文中使用它们。

dsekswqp

dsekswqp1#

您可以使用验证器来执行此检查。
您的验证器可能类似于:

const oneCheckedValidator = (): ValidatorFn => 
(formGroup: FormGroup): ValidationErrors | null => {
      const formControls = Object.keys(formGroup.controls)
    
      for (const c of formControls) {
        if(formGroup.get(c).value) {
          return null;
        }
      }
    
      return { ['SomeErrorCode']: true };
    };

然后在表单组的定义上:

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),
    }, oneCheckedValidator()),
 });

然后有几种方法可以检查FormGroup是否有效。您可以检查FormGroup对象的invalid或valid属性,也可以通过errors属性或hasErrors()函数检查它是否有任何错误。

相关问题