在Angular中多个input验证重复性

新手上路,请多包涵

问题描述

我有5个Input在一个FormArray下面,点击添加按钮会向FormArray里push一个新的FormControl并有一个验证这个input是否与其他的4个input的值相同的Validator,现在不知道怎么写才能让Angular正确验证,因为当前的写法的验证总会是true,因为当前已经有一个FormControlFormArray中.所以验证就是在验证自己是否等于自己..我意思是一定会有一个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的值全部不同,只要相同就显示错误.

阅读 3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进