在Angular 2复选框列表中进行验证 [英] Validation on a list of checkboxes Angular 2

问题描述

我有一个在注册表单上显示为复选框的业务单位列表以及一个文本框字段，并且正在进行验证。

I have a list of business units that are rendered as checkboxes on a registration form along with a textbox field and am doing validation.

 <label for="inputFirstName" class="sr-only">First name</label>
<input type="text" formControlName="firstName" class="form-control" placeholder="First name">

 <div class="checkbox" *ngFor="let bu of businessUnits">
        <label><input type="checkbox" #instance value="{{bu.BuName}}" (click)="getCheckBoxValue(instance.checked, bu.BuName)">{{bu.BuName}}</label>
    </div>

从数据库表中检索业务单位列表，并在加载表单时呈现

The list of business units are retrieved from a database table and it is rendered when the form loads

businessUnits: BusinessUnit[] = [];

在构造函数中，我正在像这样验证电子邮件

In the constructor I am validating the email like this

  "firstName": new FormControl('', [Validators.required]),

}）

如何验证在页面上动态加载的checbox列表中的至少一个复选框

How would I go about in validating that at least one check box of the list of checboxes the were loaded dynamically on page load is checked?

谢谢

推荐答案

请尝试以下演示： https://stackblitz.com/edit/ angular-custom-form-validation？file = app / app.component.ts

第二个参数将接受验证器功能，就像这样通过

the 2nd param will accept validator function, just pass like this

this.fg = this.fb.group({
  firstName: ['', [Validators.required]],
  bUnits: this.fb.array(
    this.businessUnits.map(() => this.fb.control('')),
    CustomValidators.multipleCheckboxRequireOne
  )
});

AppComponent

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms'

import { CustomValidators } from './custom.validators';

@Component({
  selector: 'app-root',
  template: `
    <form (ngSubmit)="onSubmit()" novalidate [formGroup]="fg">
      <div><input type="text" formControlName="firstName" class="form-control" placeholder="First name"></div>
      <div formArrayName="bUnits">
        <div *ngFor="let unit of fg.controls.bUnits.controls; let i = index;">
          <p>Unit {{ i + 1 }}</p>
          <div>
            <label>
              <input type="checkbox" [formControlName]="i" [value]="businessUnits[i].value">
              {{businessUnits[i].name}}
            </label>
          </div>
        </div>
      </div>

      <button type="submit">Submit</button>
      <p>Status {{ fg.valid }}</p>
    </form>
  `
})
export class AppComponent implements OnInit {
  fg: FormGroup;
  businessUnits: any[] = [];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // do some stub to grab data
    this.businessUnits = [
      {name: 'BU 1', value: "1"},
      {name: 'BU 2', value: "2"},
      {name: 'BU 3', value: "3"}
    ];
    this.fg = this.fb.group({
      firstName: ['', [Validators.required]],
      bUnits: this.fb.array(
        this.businessUnits.map(() => this.fb.control('')),
        CustomValidators.multipleCheckboxRequireOne
      )
    });

  }

  onSubmit() {
    console.log(this.fg);
  }
}

CustomValidators

import { FormArray } from '@angular/forms';

export class CustomValidators {
  static multipleCheckboxRequireOne(fa: FormArray) {
    let valid = false;

    for (let x = 0; x < fa.length; ++x) {
      if (fa.at(x).value) {
        valid = true;
        break;
      }
    }
    return valid ? null : {
      multipleCheckboxRequireOne: true
    };
  }
}

这篇关于在Angular 2复选框列表中进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！