typescript - Hvordan validere at minst én avkrysningsboks er valgt i Angular

Jeg har en liste med angular avkrysningsbokser og trenger å validere om minst én er valgt.

Avkrysningsbokselementene er dynamiske (de kommer fra en tjeneste), så det er ikke en statisk liste. Én gang kan den ha 3 elementer, og en annen gang kan den ha 50+ osv.

Malen går slik:

<tr *ngFor="let recipient of recipients">
      <td class="disable edit">
        <div>
          <span class = "textbluesmall"><input type="checkbox"   [checked]="true" value="{{recipient?.participantId }}" name="participant" />{{recipient?.lastName }} ,{{recipient?.firstName }}</span>
        </div>
      </td>
      <td class="disable edit">
        <div>
          <span>{{recipient?.email }}</span>
        </div>
      </td>
    </tr>

Og jeg prøver å løse det på denne måten, men det fungerer ikke

.TS FIL:

  var checkboxs=document.getElementsByName('participant');
  var okay=false;
  for(var i=0,l=checkboxs.length;i<l;i++)
  {
    if(checkboxs[i].checked){
      okay=true;
      break;
    }
  }
  if(okay){
    return true;
  }
  else{
    return false;
  }
} 

How can I do this the easiest way?

Svar #1

din konstruktør

constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      recipients: new FormArray([], minSelectedCheckboxes(1))
    });

legg til denne funksjonen

function minSelectedCheckboxes(min = 1) {
  const validator: ValidatorFn = (formArray: AbstractControl) => {
    if (formArray instanceof FormArray) {
      const totalSelected = formArray.controls
        .map((control) => control.value)
        .reduce((prev, next) => (next ? prev + next : prev), 0);
      return totalSelected >= min ? null : { required: true };
    }

    throw new Error('formArray is not an instance of FormArray');
  };

  return validator;
}

Svar #2

Siden avmerkingsboksene må opprettes dynamisk, må du bruke Reactive Forms i Angular.

Reaktive skjemaer består hovedsakelig av tre typer klasser, nemlig,

  • FormGroups
  • FormArray
  • FormControl

For å kunne lage avmerkingsbokser dynamisk, må du starte med å importere FormsModule og ReactiveFormsModule inne i din module.ts-fil, og legge dem til i imports-arrayet til din @NgModule-dekoratør.

På samme måte importer FormBuilder og FormGroup i din component.ts-fil. Bruk deretter FormBuilder-tjenesten for å opprette din FormGroup som vil bli erklært i malen din.

export class AppComponent {
  form: FormGroup;
  arrayOfRecepients = [];

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      recipients: new FormArray([])
    });
  }

}

I malfilen din, bind skjemaelementet med [formGroup]="form"

<form [formGroup]="form">
  <!-- Template code for checkboxes -->
</form>

Iterer gjennom arrayen din av mottakere for å legge nye instanser av FormControl til FormArray. Sett kontrollen til false, slik at avkrysningsboksene er merket som ukryssede. På denne måten vil form-arrayen betrakte hver enkelt avkrysningsboks som en del av sin samling av kontroller.

this.arrayOfRecepients.forEach(() => this.recipientsFormArray.push(new FormControl(false)));

I malfilen din, iterer over arrayen din av mottakere ved å bruke *ngFor-direktivet. Definer formArrayName som recipients da det er nødvendig for å informere form-APIen.

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="recipients" *ngFor="let recepient of recipientFormArray.controls; let i = index">
    <input type="checkbox" [formControlName]="i">
    {{arrayOfRecipients[i].name}}
  </label>
</form>

For å validere avmerkingsboksene, må du sende inn din valideringsfunksjon som en andre parameter til FormArray.

Validatorfunksjonen bør være slik at den tar din formArray og antall minst nødvendige avkryssede bokser som input. Den bør hente verdiene til kontrollen, regne ut antallet kontrollverdier som er true, og deretter sammenligne tallet med minimum.

TLDR;

For din referanse, vennligst finn lenke til en fungerende demo her

Relaterte artikler