Angular Reactive form showing error on validation condition on production build-CodePudding

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 >
       <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 >
     <div *ngIf="getAboutControl.schedule_time.touched && getAboutControl.schedule_time.errors?.required">
      Time is required *
     </div>
   </div>

CodePudding user response：

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)"