Angular Reactive form showing error on validation condition on production build

Question

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 ||
 getAboutControl.schedule_date.errors?.required)"

my Form init:

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

my Html:

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

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

schedule == 2 && (getAboutControl.schedule_time.errors?.required || getAboutControl.schedule_date.errors?.required ) And check schedule variable type string or not — Sanooj T
– Sanooj T, Commented Dec 9, 2021 at 10:20
@SanoojT can you explain. i have initialized both variables as string. — Najam Us Saqib
– Najam Us Saqib, Commented Dec 9, 2021 at 11:37
@NajamUsSaqib If both are strings then you'd need to replace schedule == 2 by schedule == '2' in the template. — sebaferreras
– sebaferreras, Commented Dec 9, 2021 at 13:58

sebaferreras · Accepted Answer · 2021-12-09 14:00:50Z

2

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 Dec 9, 2021 at 14:00

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

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

2 Comments

Najam Us Saqib Over a year ago

lol what a dumb bug it was :D wasted 2 days. i changed schedule_time schedule_date unlimited times and thought it is related to them.

sebaferreras Over a year ago

Yeah, these bugs are the hardest ones to find as we usually look for more complicated problems and overlook the simplest things! It happens to all of us :)

Collectives™ on Stack Overflow

Angular Reactive form showing error on validation condition on production build

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related