在Angular中多个input验证重复性

发布于 2022-09-07 23:52:45 字数 2046 浏览 36 评论 0

问题描述

我有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的值全部不同,只要相同就显示错误.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文