Angular Reactive form showing error on validation condition on production build


Using reactive forms in Ionic application showing error on production build.

67: This condition will always return ‘false’ since the types ‘string’
and ‘number’ have no overlap.

[disabled]="(schedule == 2 && getAboutControl.schedule_time.errors?.required ||

my Form init:

initAboutForm() {
    this.aboutForm ={
      is_schedule: ['1'], // will depend on this to make date and time required.
      schedule_date: [''],
      schedule_time: [''],
      // other values

my Html:

      <ion-datetime displayFormat="DD MMM, YYYY" min="2021" max="2030" formControlName="schedule_date">
    <div class="text-danger">
       <div *ngIf="getAboutControl.schedule_date.touched && getAboutControl.schedule_date.errors?.required">
        Date is required *

     <ion-datetime displayFormat="HH:mm" formControlName="schedule_time"></ion-datetime>
   <div class="text-danger">
     <div *ngIf="getAboutControl.schedule_time.touched && getAboutControl.schedule_time.errors?.required">
      Time is required *


As mentioned in the comments, in the template you’re comparing schedule (string) against 2 (number).

So the fix would be to compare schedule against '2' instead:

[disabled]="(schedule === '2' && getAboutControl.schedule_time.errors?.required || getAboutControl.schedule_date.errors?.required)"

Answered By – sebaferreras

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.