CODEWITHSUNDEEP
javascriptangular
Jojoseph
Jojoseph

Reputation: 119

Check in Angular HTML template if input value already exists in array

I know this kind of question has been asked several times, but having checked all the answers I haven't found the solution. In my HTML template I want to check if the input value already exists in the numbers array. If it exists a message is shown. I thought to solve this problem with 'indexOf' method or 'includes'. However this does not work. Have a look at this stackblitz.

HTML Template:

Numbers registered: {{ numbers }}
<form>
  <label for="number" class="absolute left-0 -top-5 text-green-950 text-sm transition-all">number<span class="text-red-500">*</span></label>
  <input id="number" #number="ngModel" (ngModel)="number" name="number" minlength="4" maxlength="4" required  placeholder="number" />

  <p class="text-sm px-3 text-red-500" *ngIf="!number.valid && number.touched">Enter exactly 4 digits!</p>
  <p class="text-sm px-3 text-red-500" *ngIf="numbers.includes(number) && number.touched">This number already exists!
  </p>
</form>

TS file:

import { Component, VERSION } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular ' + VERSION.major;

numbers:any = [1000,1100,1200,1300,1400];
}

Upvotes: 0

Views: 2846

Answers (2)

Yishai Nachliel
Yishai Nachliel

Reputation: 73

As I understand, your basic question is why the number you put in the input doesn't return true when running:

numbers.include(inputNUM)

If this is the case, I think there are 2 things you need to fix:

  1. in the span you write:

ngIf="numbers.includes(number)"

This is meaningless, because you are passing a reference to the input, and not the number value. Instead, you need to pass "number.value".

  1. Once you do that you need to parse the value into int, since the value is string by default.

So I change your code a bit to the following flow:

  1. whenever an input happens (on the input element) a function will be fired that will check if the input is currently in the numbers array.

  2. If it is, it will change a variable in the component state.

  3. the span will show if the variable is true.

Here are the important parts of the code:

HTML:

<input id="number" #number="ngModel" (keyup)="check(number.value) name="number" />


<p *ngIf="isThere">This number already exists! </p>

TS:

export class AppComponent {
  name = 'Angular ' + VERSION.major;
  isThere = false;
  numbers = [1000, 1100, 1200, 1300, 1400];

  check(num) {
    if (num) {
      if (this.numbers.includes(parseInt(num))) {
        this.isThere = true;
      } else {
        this.isThere = false;
      }
    }
  }
}

There are many ways to achieve the same goal, the main point of the answer is to make sure you check the correct number value and that it is int.

Upvotes: 0

Eliseo
Eliseo

Reputation: 57929

you need use [(ngModel)]="number", add a variable number to your .ts, not use the same name of the template variable than number and search the number convert to int

    <!--now the template variable is numberID-->
    <input id="number" #numberID="ngModel" 
        <!--see the "bannana" [(  )] -->
        [(ngModel)]="number" 
        name="number" minlength="4" maxlength="4" required  placeholder="number" />
    
      <!--you ask about includes(+number),see the "+"-->
      <p class="text-sm px-3 text-red-500" *ngIf="numbers.includes(+number) &&
            <!--and numberID.touched-->
            numberID.touched">
           This number already exists!
      </p>

in .ts

number:number=0;

NOTE: I put comments in the .html (remove it to work)

Upvotes: 1

Related Questions