反应形式的验证组 mat-checkbox答案

【问题标题】：Validation group mat-cheeckbox in reactive form反应形式的验证组 mat-checkbox
【发布时间】：2021-01-01 06:13:10
【问题描述】：

是否可以验证一组 mat-checkbox？

我希望至少有一个框可供选择。

我有这个：

ts：

this.formSalud = this.fb.group({
      categorias: this.fb.group({
        internacional: [false],
        nacional: [false],
        nacionalSinReembolso: [false],
        nacionalClinicasAcotadas: [false]
      }, requireCheckboxesToBeCheckedValidator()),
    });

html:

 <div class="d-flex flex-column" formGroupName="categorias">
     <mat-checkbox formControlName="internacional" id="internacional">Internacional</mat-checkbox>
     <mat-checkbox formControlName="nacional">Nacional</mat-checkbox>
     <mat-checkbox formControlName="nacionalSinReembolso">Nacional sin reembolso</mat-checkbox>
     <mat-checkbox formControlName="nacionalClinicasAcotadas">Nacional con clínicas acotadas</mat-checkbox>                     
</div>

【问题讨论】：

你能创建 stackblitz 吗？
是的：stackblitz.com/edit/angular-ivy-kbleng?file=src/app/…

标签： angular typescript angular-reactive-forms

【解决方案1】：

你的 valdiator 调用是错误的。它应该是这样的：

this.formSalud = this.fb.group({
      categorias: this.fb.group({
        internacional: [false],
        nacional: [false],
        nacionalSinReembolso: [false],
        nacionalClinicasAcotadas: [false]
      }, { validators:[ requireCheckboxesToBeCheckedValidator]}),
    });

【讨论】：

【解决方案2】：

您可以使用 Angular custom validators 来实现这一点。

this.formSalud = this.fb.group({
    internacional: [false],
    nacional: [false],
    nacionalSinReembolso: [false],
    nacionalClinicasAcotadas: [false]
  }, { validators: requireCheckboxesToBeCheckedValidator });

export const requireCheckboxesToBeCheckedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
 const nacional = control.get('nacional').value;
 const internacional = control.get('internacional').value;
 const nacionalSinReembolso = control.get('nacionalSinReembolso').value;
 const nacionalClinicasAcotadas = control.get('nacionalClinicasAcotadas').value;

 const isAnyChecked = nacional || internacional || nacionalSinReembolso || nacionalClinicasAcotadas

 return isAnyChecked ? null : { required: true };
};

在模板中显示错误

<div *ngIf="formSalud.errors?.required">Check at least one checkbox.</div>

【讨论】：

我如何显示错误？我正在尝试以下操作：stackblitz.com/edit/angular-ivy-kbleng?file=src/app/…
@PacoZevallos 我在您的代码中看到了一些小故障，为什么您要在表单组中添加表单组？并且validators 的v 很小，您在示例中使用了资本。我分叉了你的 stackblitz stackblitz.com/edit/… 现在结帐
@PacoZevallos 对您有用，如果是，请不要忘记接受对其他同事有帮助的答案

【解决方案3】：

问题 1： 在您的 formGroup 中有错字应该是验证器。

component.ts

this.formSalud = this.fb.group({
      categorias: this.fb.group({
        internacional: [false],
        nacional: [false],
        nacionalSinReembolso: [false],
        nacionalClinicasAcotadas: [false]
      }, { validators: requireCheckboxesToBeCheckedValidator }),
    });

Issue2：由于 customValidator 根据需要返回错误对象键，因此您需要替换 required 而不是 isAnyChecked

component.html

 <form [formGroup]="formSalud" novalidate class="pt-3 pt-md-4">
  <div class="col-12">
      <div class="d-flex flex-column" formGroupName="categorias">
          <mat-checkbox formControlName="internacional">Internacional</mat-checkbox>
          <mat-checkbox formControlName="nacional">Nacional</mat-checkbox>
          <mat-checkbox formControlName="nacionalSinReembolso">Nacional sin reembolso</mat-checkbox>
          <mat-checkbox formControlName="nacionalClinicasAcotadas">Nacional con clínicas acotadas</mat-checkbox>
          <div class="invalid-feedback" *ngIf="formSalud.controls['categorias'].errors && formSalud.controls['categorias'].errors.required">Se requiere marcar al menos una casilla.</div>
      </div>
  </div>
</form>

问题 3： 使用引导程序无效反馈时。它将元素显示属性设置为 none，并在组件中使用以下 css 覆盖它。

component.css

.invalid-feedback{
  display: block;
}

Check this For More Info

Forked Working Example

【讨论】：