4

I have 3 input fields with [(ngModel)] to 3 variables.

Then I have a hidden button that only appears when all 3 variables have a value, using *ngIf. Check out the code: 

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Fecha" [(ngModel)]="matchDay">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
        <input matInput placeholder="Hora" type="number" min='00' max='23' [(ngModel)]="matchHours">
</mat-form-field>
<mat-form-field>
        <input matInput placeholder="Minutos" type="number" min='00' max='59' [(ngModel)]="matchMinutes">
</mat-form-field>
<div class="button-row" *ngIf="matchHours && matchDay && matchMinutes">
        <button mat-raised-button color="accent" (click)="setMatchDate()">Set Date</button>
</div>

The problem is that if "matchHours" or "matchMinutes" have 0 or 00 value, the "Set Date" button does not appear as if the *ngIf condition was not met.

Any ideas what might be happening here?

Here is the ts code:

export class CreateMatchComponent implements OnInit {

  matchDay: Date;
  matchHours: number;
  matchMinutes: number;

setMatchDate() {
    let parsedDate = this.matchDay.toISOString().split('T');
    this.match.matchDate = this.createFormattedMatchDate(parsedDate[0], this.matchHours, this.matchMinutes);
    console.log(this.match.matchDate);
  }

  createFormattedMatchDate(parsedDate: string, hour: number, minute: number) {
    minute = pad(minute);
    hour = pad(hour);
    function pad(n) {
      return (n < 10 && n >= 0) ? ("0" + n) : n;
    }
    let formattedDate = parsedDate + "T" + (hour + 3) + ":" + minute + ":00";
    return formattedDate; 
  } 
}
Matias Diez
  • 1,237
  • 2
  • 17
  • 26

1 Answers1

4

As 0 is considered falsy in javascript, so *ngIf gets it as false and your button does not appear. You can use an string type value '0' so it won't be considered as false.

For more information about falsy see : https://developer.mozilla.org/en-US/docs/Glossary/Falsy

Abel
  • 688
  • 6
  • 19
Rohan Sampat
  • 930
  • 1
  • 13
  • 30