here what i am trying i am trying to do is validating multiple inputs(which are mentioned in array only those have to b validated) and the input are validated whether they are having a value or not input if the input is empty then the input border should be red the issue i am facing is i am able to apply to one input and but the same logic when it is applied to another inputs it is not applying in angular application but in stackblitz it is working
below is my code
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 link
