Question

在这里，我要尝试的是验证多个输入（在数组中仅提及那些必须经过b验证的输入），如果输入为空，则对输入是否具有值进行验证，然后输入边框应该为红色我面临的问题是我能够应用于一个输入，但是当将其应用于另一输入时，相同的逻辑并不适用于角度应用，而是在stackblitz中起作用

下面是我的代码

data = [{ id: 1, name: 'Mr. Nice' },
  { id: 2, name: 'Narco' },
  { id: 3, name: 'Bombasto' },
  { id: 4, name: 'Celeritas' },
  { id: 5, name: 'Magneta' },
  { id: 6, name: 'RubberMan' },
  { id: 7, name: 'Dynama' },
  { id: 8, name: 'Dr IQ' },
  { id: 9, name: 'Magma' },
  { id: 10, name: 'Tornado' }
  ]

  dataa = [
    {id:'test',name:'test'},
    {id:'address',name:'address'}
  ]

  @ViewChildren('ds') inps: QueryList<ElementRef>;
   @ViewChildren('dp') inp: QueryList<ElementRef>;


  check() {
    for (var x in this.inps) {
      let checkids: Array<number> = [2, 3, 6];
      if (x == "_results") {
        let id;
        for (var i = 0; i < this.inps[x].length; i++) {
          id = this.inps[x][i].nativeElement.getAttribute('id');
          if ((checkids.indexOf(+id) != -1) && !this.inps[x][i].nativeElement.value) {
            this.inps[x][i].nativeElement.style.borderColor = "red";
          }

        }
      }
    }
    for (var y in this.inp) {
      let checkid = ['address'];
      if (y == "_results") {
        let ids;
        for (var j = 0; j < this.inp[y].length; j++) {
          ids = this.inp[y][j].nativeElement.getAttribute('id');
          if ((checkid.indexOf(ids) != -1) && !this.inp[y][j].nativeElement.value) {
            this.inp[y][j].nativeElement.style.borderColor = "red";
          }

        }
      }
    }

  }

.html

<div *ngFor="let x of data">
    <input type="text" id={{x.id}} name={{x.name}} [ngModel]="sample" #ds>
</div>

<br>
<br>

<div *ngFor="let y of dataa">
<input type="text" id={{y.id}} name={{y.name}} [ngModel]="sample" #dp>
</div>
<button type="button" (click)="check()">Check</button>

stackblitz链接

https://stackblitz.com/edit/angular-pw7bnb

Answer 1

您应该使用属性绑定

<input type="text" [id]="x.id" [name]="x.name" [ngModel]="sample" #ds>

Answer 2

由于checkids.indexOf（+ id）！= -1）条件而无法使用。如果删除，它将起作用。我不确定它的目的是什么。为什么需要该条件，该条件仅允许您验证2、3、6

无法使用角度验证多个输入

2 个答案: