Блог

В форме, управляемой шаблоном, я должен проверить, установлен ли хотя бы один флажок. Я создал пользовательский валидатор.

HTML-форма:

 <div class="form-group">
  <div class="form-check con-errori">
    <label for="conErrori" class="form-check-label">
      <input type="checkbox" name="conErrori" #conErrori="ngModel" [(ngModel)]="conErroriInput"
       id="conErrori" class="form-check-input" data-either-validator="form-check-input" data-either-group-container-selector=".form-group">Con errori
    </label>
  </div>

  <div class="form-check senza-errori">
    <label for="senzaErrori" class="form-check-label">
      <input type="checkbox" name="senzaErrori" #senzaErrori="ngModel" [(ngModel)]="senzaErroriInput"
       id="senzaErrori" class="form-check-input" data-either-validator="form-check-input" data-either-group-container-selector=".form-group">Senza errori
    </label>
  </div>

  <div *ngIf="!conErrori.valid amp;amp; (conErrori.dirty ||conErrori.touched)" class="error">
    <div *ngIf="conErrori.errors.ev">
    Selezionare almeno una voce
   </div>
  </div>

  <div *ngIf="!senzaErrori.valid amp;amp; (senzaErrori.dirty ||senzaErrori.touched)" class="error">
    <div *ngIf="senzaErrori.errors.ev">
    Selezionare almeno una voce
   </div>
  </div>

</div>
 

валидатор.ts:

 import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';
import { FormControl, NG_VALIDATORS, Validator } from '@angular/forms';

@Directive({

  selector: '[data-either-validator]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: EitherValidatorDirective, multi: true }
  ]
})
export class EitherValidatorDirective implements Validator{

  /*classGroup contains the class to identify all the checkboxes to validate*/
  @Input("data-either-validator") classGroup:string;

 /*groupContainerSelector contains the selector to identify the element that 
contains the checkboxex, so I can validate only those checkboxes*/
  @Input("data-either-group-container-selector") groupContainerSelector:string;

  constructor(private elRef: ElementRef, private renderer: Renderer2) { }

  validate(formControlValue: FormControl) {

    
    /*with the following code I find all the checkboxes with a specific class inside a specific html element 
    and I check if at least one is selected*/
    let groupContainer = this.elRef.nativeElement.closest(this.groupContainerSelector);
    let formControlOfSameGroup = groupContainer.querySelectorAll("."   this.classGroup)

    let validationResult:boolean = false;
    formControlOfSameGroup.forEach(element => {
      if(element.checked){
        validationResult = true;
      }
    });

    if(!validationResult){
      return { 'ev': true}
    }
    else{
      return null;
    }
  }

}
 

Моя проблема в том, что трудно обработать сообщение об ошибке, так как у меня может быть 10-20 флажков, и я должен обработать столько же

   <div *ngIf="!senzaErrori.valid amp;amp; (senzaErrori.dirty ||senzaErrori.touched)" class="error">
        <div *ngIf="senzaErrori.errors.ev">
        Selezionare almeno una voce
       </div>
      </div>
 

в качестве флажков у меня есть.

Как правильно решить эту проблему (у меня есть форма, управляемая шаблоном, а не реактивная)?

Является ли мой подход хорошим для обработки проверки перекрестных полей (в форме, управляемой шаблоном)?

Спасибо

Решение было в руководстве, я его пропустил.

     @Directive({
      selector: '[appIdentityRevealed]',
      providers: [{ provide: NG_VALIDATORS, useExisting: IdentityRevealedValidatorDirective, 
                  multi: true }]
    })
    export class IdentityRevealedValidatorDirective implements Validator {
      validate(control: AbstractControl): ValidationErrors {

      /*this way you can retrieve the value of the fields you have to validate*/
      const name = control.get('name');
      const alterEgo = control.get('alterEgo');

      if(error){
         return { 'errorCode': true}
      }
      else{
           return null;
      }
    }
  }
 

Во время проверки перекрестных полей валидатор следует применять к форме, а не к полям.

 <form #heroForm="ngForm" appIdentityRevealed>  

<div *ngIf="heroForm.errors?.errorCode amp;amp; (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
    Name cannot match alter ego.
</div>