验证组mat-cheeckbox以反应形式

问题描述

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

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

我有这个:

ts:

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

html:

 < div class ="d-flex flex-column"formGroupName ＝类别".< mat-checkbox formControlName =国际"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 conclínicasacotadas</mat-checkbox></div> 

解决方案

问题1:在您的formGroup中，您有错别字，应该是验证者.

component.ts

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

问题2::由于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 ＝类别".< 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 conclínicasacotadas</mat-checkbox>< div class ="invalid-feedback"* ngIf =" formSalud.controls ['categorias'].errors&&formSalud.controls ['categorias'].errors.required"，要求的条件是不带卡西利亚.</div></div></form> 

问题3::使用引导程序无效反馈时.它将元素的display属性设置为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-cheeckbox以反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！