0

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];
}
Improve this question
2
  • Do you mean [(ngModel)]="number"? or (ngModel)="number"? Commented Aug 18, 2021 at 10:23
  • you are checking "number", you should be checking if "number.value" is in the numbers array. "number" is the html input element, not the value itself. Commented Aug 18, 2021 at 10:26

2 Answers 2

Reset to default
1

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)

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This is very much the solution I was looking for. But still one question. Why do you have to put a "+" in front of number (numbers.include(+number))? 'number' is already initialized in the component as a number.
when you use [(ngModel)]="number" if you enter a number in the input you see that is a "string" (you can see if you write in your .html <pre>{{number|json}}</pre>) so I need "convert To number". the + makes that if number is "100", +number becomes 100 (I'm pretty sure is neccesary, but check it youself remove it)
0

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.

Improve this answer

1 Comment

Your solution works very well too! Thank you for the thorough explanation. I chose however for the above solution for which I don't need a function in the component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.