在Angular中多个input验证重复性
问题描述
我有5个Input在一个FormArray下面,点击添加
按钮会向FormArray里push
一个新的FormControl
并有一个验证这个input
是否与其他的4个input
的值相同的Validator
,现在不知道怎么写才能让Angular
正确验证,因为当前的写法的验证总会是true
,因为当前已经有一个FormControl
在FormArray中
.所以验证就是在验证自己是否等于自己..我意思是一定会有一个FormControl
是这个新添加的FormControl
的本身,所以结果总会是已经有一个值和当前要验证的相等,好像是Angular
总会先设置FormControl
的值然后再进行验证,一时没找到什么解决办法..哪位大神能告知一下思路?
问题出现的环境背景及自己尝试过哪些方法
Chrome,Angular6.
我尝试过找一个值来判断当前要验证的FormControl
能不能跳过自己只验证其余的四个,但是没找到,也没什么思路了..
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
html:
<div id="types" formGroupName="newTypes">
<div class="addGroup">
<div class="articleLabelDiv" *ngFor="let type of newTypes.controls; let i = index">
<input type="text" class="simpleInput" [formControlName]="i">
<button type="button" class="simpleButton" (click)="deleteType(i)"><mat-icon>close</mat-icon></button>
</div>
<button type="button" *ngIf="newTypes.length<5" [disabled]="newTypes.invalid" (click)="addType()" mat-raised-button color="primary"><mat-icon>add</mat-icon></button>
</div>
Form Group:
this.articleMsg = new FormGroup({
title: new FormControl(this.data.article.title, ),
labels: new FormArray([]),
newTypes: new FormArray([]),
});
component中的validator:
private isExistedValidator(checkName: string): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
if (checkName === 'label') {
return this.labels.controls.every(label => {
return label !== control;
}) ? {'isExisted': true} : null ;
你期待的结果是什么?实际看到的错误信息又是什么?
期待的结果是当前有数个input,如何验证这数个input的值全部不同,只要相同就显示错误.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论