如何编写验证以检查两个字段之一是否为空?
How to compose a validation to check if one of two fields is not empty?
所以,在myForm中,有2个字段name和email,我想添加验证来检查用户是否输入了其中一个,它会通过验证;
如果两个字段都为 null 或空,则失败。
如何编写这样的验证器来满足我的场景?
<form [formGroup]="myForm" novalidate (ngSubmit)="submit(myForm.value)">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="card">
<div class="card-header my-contact-info">
My Contact Info
</div>
<div class="card-block">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Name:</label>
<small class="alert" *ngIf="!myForm.controls['name'].valid && myForm.controls['name'].touched">This field is required.</small>
<input type="text" class="form-control" formControlName="name">
</div>
<div class="form-group">
<label>Email:</label>
<small class="alert" *ngIf="!myForm.controls['email'].valid && myForm.controls['email'].touched">This field is required. Please input a valid email.</small>
<input type="text" class="form-control" formControlName="email">
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</div>
</div>
buildForm(): void {
this.myForm = this._fb.group({
'name': [null, Validators.compose([Validators.required, Validators.minLength(3)])],
'email': [null, Validators.compose([Validators.required, Validators.email])]
});
}
我会为此创建一个自定义验证器,例如:
import {FormControl, FormGroup, ValidatorFn} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
export const OneFilledOutValidator = (): ValidatorFn => {
return (group: FormGroup): {[key: string]: boolean} => {
const fields = [];
for (const field in group.controls) {
if (group.controls.hasOwnProperty(field)) {
fields.push(group.get(field).value);
}
};
const result = fields.filter(field => !!field);
const valid = result.length !== 0;
return valid ? null : {
oneFilledOut: true
};
};
};
这基本上采用一个表单组并检查是否有任何控件具有值。
this.myForm = this._fb.group({
'name': [null, [Validators.minLength(3)]],
'email': [null, [Validators.email]]
}, OneFilledOutValidator); // I would wrap this in a CustomValidators constant
所以,在myForm中,有2个字段name和email,我想添加验证来检查用户是否输入了其中一个,它会通过验证; 如果两个字段都为 null 或空,则失败。
如何编写这样的验证器来满足我的场景?
<form [formGroup]="myForm" novalidate (ngSubmit)="submit(myForm.value)">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="card">
<div class="card-header my-contact-info">
My Contact Info
</div>
<div class="card-block">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Name:</label>
<small class="alert" *ngIf="!myForm.controls['name'].valid && myForm.controls['name'].touched">This field is required.</small>
<input type="text" class="form-control" formControlName="name">
</div>
<div class="form-group">
<label>Email:</label>
<small class="alert" *ngIf="!myForm.controls['email'].valid && myForm.controls['email'].touched">This field is required. Please input a valid email.</small>
<input type="text" class="form-control" formControlName="email">
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</div>
</div>
buildForm(): void {
this.myForm = this._fb.group({
'name': [null, Validators.compose([Validators.required, Validators.minLength(3)])],
'email': [null, Validators.compose([Validators.required, Validators.email])]
});
}
我会为此创建一个自定义验证器,例如:
import {FormControl, FormGroup, ValidatorFn} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
export const OneFilledOutValidator = (): ValidatorFn => {
return (group: FormGroup): {[key: string]: boolean} => {
const fields = [];
for (const field in group.controls) {
if (group.controls.hasOwnProperty(field)) {
fields.push(group.get(field).value);
}
};
const result = fields.filter(field => !!field);
const valid = result.length !== 0;
return valid ? null : {
oneFilledOut: true
};
};
};
这基本上采用一个表单组并检查是否有任何控件具有值。
this.myForm = this._fb.group({
'name': [null, [Validators.minLength(3)]],
'email': [null, [Validators.email]]
}, OneFilledOutValidator); // I would wrap this in a CustomValidators constant