时间戳

首页 > 解决方案 > 角度形式：如何确保选择多选按钮组中的至少一项

angular - 角度形式：如何确保选择多选按钮组中的至少一项

问题描述

我有一个带有以下按钮组 屏幕截图的角度形式

<div class="btn-group btn-group-toggle d-block" formGroupName="usages">
        <label ngbButtonLabel class="btn" [class.btn-secondary]="usages.leisureUse">
          <input ngbButton type="checkbox" [(ngModel)]="usages.leisureUse" formControlName="leisureUse"> Leisure Use
        </label>
        <label ngbButtonLabel class="btn" [class.btn-secondary]="usages.commuteUse">
          <input ngbButton type="checkbox" [(ngModel)]="usages.commuteUse" formControlName="commuteUse"> Commute Use
        </label>
        <label ngbButtonLabel class="btn" [class.btn-secondary]="usages.competitionUse">
          <input ngbButton type="checkbox" [(ngModel)]="usages.competitionUse" formControlName="competitionUse"> Competition Use
        </label>
      </div>

在组件中：

searchForm = this.formBuilder.group({
      usages: this.formBuilder.group({
        leisureUse: ["", [Validators.required]],
        commuteUse: ["", [Validators.required]],
        competitionUse: ["", [Validators.required]]
      }, { updateOn: "change" }
    // ...
}
// ---

// model storing state
  usages = {
    leisureUse: false,
    commuteUse: false,
    competitionUse: false
  };

我需要验证是否至少选择了这些复选框按钮中的一个，但是我似乎无法弄清楚如何。我已经研究过创建一个自定义验证器，尽管它从未被触发，现在我知道要在验证器中放入什么代码。

标签： angularvalidation

解决方案

您可以进行表单组验证以进行验证

const heroForm = new FormGroup({
  'name': new FormControl(),
  'alterEgo': new FormControl(),
  'power': new FormControl()
}, { validators: identityRevealedValidator });

源代码：https ://angular.io/guide/form-validation#adding-cross-validation-to-reactive-forms

推荐阅读