Angular 反应式表单在生产版本的验证条件下显示错误

Question

在 Ionic 应用程序中使用响应式表单在生产构建中显示错误。

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

我的表单初始化：

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

我的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>

Answer 1

如评论中所述，在模板中，您将 schedule（字符串）与 2（数字）进行比较。

所以解决方法是将 schedule 与 '2' 进行比较：

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

Angular 反应式表单在生产版本的验证条件下显示错误

Angular Reactive form showing error on validation condition on production build

javascript

validation

ionic-framework

angular

angular-reactive-forms