如何一次只显示单个验证erorr
发布时间:2020-12-17 09:52:44 所属栏目:安全 来源:网络整理
导读:我有这个代码在我的表单上显示错误 input [ngFormControl]="form1.controls['thing']" type="text" id="thing" #thing="ngForm"div *ngIf='thing.dirty !thing.valid' div class="err" *ngIf='thing.errors.required' Thing is required. /div div class="er
我有这个代码在我的表单上显示错误
<input [ngFormControl]="form1.controls['thing']" type="text" id="thing" #thing="ngForm"> <div *ngIf='thing.dirty && !thing.valid'> <div class="err" *ngIf='thing.errors.required'> Thing is required. </div > <div class="err" *ngIf='thing.errors.invalid'> Thing is invalid. </div > </div> 但是如果事情中有两个错误,则会出现两个错误.
您可以创建自定义管道以获取验证器的errors对象的第一个元素:
@Pipe({ name: 'first' }) export class FirstKeyPipe { transform(obj) { var keys = Object.keys(obj); if (keys && keys.length>0) { return keys[0]; } return null; } } 这样您就只能显示一个错误: @Component({ selector: 'my-app',template: ` <form> <input [ngFormControl]="form.controls.input1"> <div *ngIf="form.controls.input1.errors"> <div *ngIf="(form.controls.input1.errors | first)==='required'"> Required </div> <div *ngIf="(form.controls.input1.errors | first)==='custom'"> Custom </div> </div> </form> `,pipes: [ FirstKeyPipe ] }) export class MyFormComponent { constructor(private fb:FormBuilder) { this.form = fb.group({ input1: ['',Validators.compose([Validators.required,customValidator])] }); } } 看到这个plunkr:https://plnkr.co/edit/c0CqOGuzvFHHh5K4XNnA?p=preview. 注意:与Günter同意创建可用组件;-)有关详细信息,请参阅此文章: > http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |