所以我有一个包含多个输入表单字段和嵌套表单组的表单.在嵌套表单组中,验证应该是这样的:如果填充了三个输入中的任何一个,那么表单应该是有效的.这个人可以填写全部,甚至只填一个,表格应该有效.我的模板代码如下:
<h3 class="form-title">{{title}}</h3>
<form [formGroup]="formX" novalidate>
<div formGroupName="brandIdentifier">
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="brandName.valid && brandName.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="brandName.invalid && brandName.touched">close</mat-icon>
<input matInput type="text" placeholder="Brand Name" formControlName="brandName" />
</mat-form-field>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="brandId.valid && brandId.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="brandId.invalid && brandId.touched">close</mat-icon>
<input matInput type="text" placeholder="Brand Id" formControlName="brandId" />
</mat-form-field>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="contentId.valid && contentId.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="contentId.invalid && contentId.touched">close</mat-icon>
<input matInput type="text" placeholder="Content Id" formControlName="contentId" />
</mat-form-field>
</div>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="startTime.valid && startTime.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="startTime.invalid && startTime.touched">close</mat-icon>
<input matInput type="text" placeholder="Start Time" formControlName="startTime" />
</mat-form-field>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="endTime.valid && endTime.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="endTime.invalid && endTime.touched">close</mat-icon>
<input matInput type="text" placeholder="End Time" formControlName="endTime" />
</mat-form-field>
<button mat-raised-button color="primary" (click)="startAnalysis()" [ngClass]="{'form-valid':formX.valid, 'form-invalid':formX.invalid}">Submit</button>
<pre>{{formX.value | json}}</pre>
</form>
我该怎么做?使用Validator类是给定的,但我无法让它成为可选的.
解决方法:
您可以使用自定义验证器,为嵌套组应用自定义验证器,我们检查三个字段中至少有一个字段的值是否为空字符串,所以这是一个示例:
构建形式:
this.myForm = this.fb.group({
nestedGroup: this.fb.group({
first: [''],
second: [''],
third: ['']
// apply custom validator for the nested group only
}, {validator: this.myCustomValidator})
});
自定义验证器:
myCustomValidator(group: FormGroup) {
// if true, all fields are empty
let bool = Object.keys(group.value).every(x => group.value[x] === '')
if(bool) {
// return validation error
return { allEmpty: true}
}
// valid
return null;
}
然后在表单中,您可以通过以下方式显示验证消息:
<small *ngIf="myForm.hasError('allEmpty','nestedGroup')">
Please fill at least one field
</small>
最后一个DEMO
原文地址:https://codeday.me/bug/20190701/1348405.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。