反应形式的验证组 mat-checkbox [英] Validation group mat-cheeckbox in reactive form

问题描述

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

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

我有这个:

ts:

this.formSalud = this.fb.group({类别:this.fb.group({国际:[假]，国家:[假]，nacionalSinReembolso: [假],nacionalClinicasAcotadas:[假]}, requireCheckboxesToBeCheckedValidator()),});

html:

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

解决方案

Issue1:在你的 formGroup 你有错字它应该是验证器.

component.ts

this.formSalud = this.fb.group({类别:this.fb.group({国际:[假]，国家:[假]，nacionalSinReembolso: [假],nacionalClinicasAcotadas:[假]}, { 验证器:requireCheckboxesToBeCheckedValidator }),});

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

component.html

 
<div class="col-12"><div class="d-flex flex-column";formGroupName=类别"><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>

</表单>

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

component.css

.invalid-feedback{显示:块；}

查看此了解更多信息

分叉工作示例

Is it possible to validate a group of mat-checkbox?

I want at least one box to be selectable.

I have this:

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>

解决方案

Issue1: In your formGroup you have typo It should be validators.

component.ts

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

Issue2: Since customValidator returns Error Object key as required you need to replace required instead of 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>

Issue3: When using bootstrap invalid-feedback. It set the element display property to none override this with following css in your component.

component.css

.invalid-feedback{
  display: block;
}

Check this For More Info

Forked Working Example

这篇关于反应形式的验证组 mat-checkbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！