验证Angular 2复选框列表
发布时间:2020-12-17 17:44:25 所属栏目:安全 来源:网络整理
导读:我有一个业务单位列表,在注册表单上呈现为复选框以及文本框字段并进行验证. label for="inputFirstName" class="sr-only"First name/labelinput type="text" formControlName="firstName" class="form-control" placeholder="First name" div class="checkbo
我有一个业务单位列表,在注册表单上呈现为复选框以及文本框字段并进行验证.
<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> 从数据库表中检索业务单位列表,并在表单加载时呈现 businessUnits: BusinessUnit[] = []; 在构造函数中,我正在验证这样的电子邮件 "firstName": new FormControl('',[Validators.required]), }) 如何验证在页面加载时动态加载的checbox列表中至少有一个复选框? 谢谢 解决方法
让我们试试这个演示:
https://stackblitz.com/edit/angular-custom-form-validation?file=app/app.component.ts
第二个参数将接受验证器功能,就这样通过 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: ['',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 }; } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |