show button if values are the same ionic2

Question

When the page loads, i hide the submit button and i only want to display it when the value in textbox 2 matches with that of textbox 1

HTML

<ion-item>
  <ion-label floating>Reading</ion-label>
  <ion-input type="number" formControlName="readFirst"  [(ngModel)]="readFirst"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Retype Reading</ion-label>
  <ion-input  (ngModelChange)="checkValues($event)" type="number" formControlName="readSecond"  [(ngModel)]="readSecond"></ion-input>
</ion-item>
<br>
<button *ngIf="showButton" ion-button block icon-left>
  <ion-icon name="send"></ion-icon>
  Submit Reading</button>

JS

  checkValues(){
    if(this.readSecond===this.readFirst){
      this.showButton = true;
    }else{
      this.showButton = false;
    }
  }

With my code the button disables even when the values do not match

Answer 1

Try this:

checkValues(val: string){
  if(val === this.readFirst){
    this.showButton = true;
  }else{
    this.showButton = false;
  }
}

Edit:

I'd also display the button because it can be confusing when there is no button visible, so instead of *ngIf directive I would use [disabled]="!showButton" .

Edit v2:

Here you can check a simplified version of this on stackblitz: https://stackblitz.com/edit/ionic-9gwarw?embed=1&file=pages/home/home.html

Answer 2

You did not provide full code of HTML fill, But As your HTML Code, You do not need to have formControlName that gives :

formControlName must be used with parentGroup directive

So I have to remove the formControlName and Here is Answer For you Question :

<ion-content padding>
      <ion-item>
        <ion-label floating>Reading</ion-label>
        <ion-input type="number" [(ngModel)]="readFirst"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Retype Reading</ion-label>
        <ion-input  (ngModelChange)="checkValues($event)" type="number"  [(ngModel)]="readSecond"></ion-input>
      </ion-item>
      <br>
      <button *ngIf="showButton" ion-button block icon-left>
        <ion-icon name="send"></ion-icon>
        Submit Reading</button>
</ion-content>

Here is Ts File Code :

checkValues(event){
    console.log(typeof event) //Type of Value is String
    this.readSecond = event; 
    console.log(typeof this.readFirst); //Type of Value is String 

    if(this.readSecond===this.readFirst){
      this.showButton = true;
    }else{
      this.showButton = false;
    }
  }

If the this.readFirst and this.readSecond attributes defined as the type number, But ngModel won't give integer number. it gives a string.

Sometime you can see by consoling value of this.readSecond when you type the input box, this.readSecond gives undefined value. because This happens when Angular tries to bind your model to the view before the model actually has a value. Therfore that may causes to your function make wrong.

It is better to equal the this.readSecond variable to event that pass from ngModelChange method.

checkValues(event){
    this.readSecond = event;
}

This is the view when first time you load the page :

This is the view after you enter a number in second field : If the both fields equal, Button will be shown up