angular - 物料日期空状态检查更新按钮禁用

Question

团队，

我正在使用 Angular Mat 日期选择器，我有一个条件，如果任何 mat datepicker 为空，我的更新按钮应该处于禁用模式。

在我的代码中，我正在检查 null 但仍然启用了 Button

这是我的 HTML 代码

<div class="col-md-4">
                <mat-form-field>
                    <input [disabled]="!enableEdit" [readonly]="inputReadonly" matInput [matDatepicker]="picker"
                        placeholder="Choose a date" [(ngModel)]="item2.firstPatientInDate"
                        (ngModelChange)="dateValidator($event, ii, i)">
                    <!-- (dateChange)="setChange(item2.trialName,'firstPatientInDate', ii, i)" -->
                    <button mat-button *ngIf="item2.firstPatientInDate" matSuffix mat-icon-button aria-label="Clear"
                        (click)="clearDate(ii, i, 'firstPatientInDate')">
                        <mat-icon>close</mat-icon>
                    </button>
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
            </div>
            <div class="col-md-4">
                <mat-form-field>
                    <input [disabled]="!enableEdit" required [readonly]="inputReadonly" matInput [matDatepicker]="n"
                        [ngClass]="{'lpiError': item2.lpiError}" [(ngModel)]="item2.lastPatientInDate"
                        (ngModelChange)="dateValidator($event, ii, i)" [min]="dateFilter(item2.firstPatientInDate)"
                        name="{{i+1}}--{{n}}" placeholder="Choose a date">
                    <!-- (dateChange)="setChange(item2.trialName,'lastPatientInDate', ii, i)" -->
                    <button mat-button *ngIf="item2.lastPatientInDate" matSuffix mat-icon-button aria-label="Clear"
                        (click)="clearDate(ii, i, 'lastPatientInDate')">
                        <mat-icon>close</mat-icon>
                    </button>
                    <mat-datepicker-toggle matSuffix [for]="n"></mat-datepicker-toggle>
                    <mat-datepicker #n></mat-datepicker>
                </mat-form-field>
            </div>

这是我的 ts 代码

    disableDate(): boolean {
    let dateError = false;
    for (let i = 0; i < this.milestoneData.maintenanceCountryAssumption.length; i++) {
      for (let j = 0; j < this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement.length; j++) {
        let date1 = new Date(this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j].firstPatientInDate);
        //console.log(this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j], date1);
        let date2 = new Date(this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j].lastPatientInDate);
        //console.log(this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j], date2);
        if (date1 > date2 && (date1 != null && date2 != null)) {
          // console.log(date1, date2);
          dateError = true;
          this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j]['lpiError'] = true;
          //break;
        } else {
          this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j]['lpiError'] = false;
        }
      }
    }
    return dateError;
}

这是我的日期验证器

  dateValidator(input: Date | null, ii, i) {
if (input != null) { // null check
  console.log(input, this.milestoneData.maintenanceCountryAssumption[ii].trialDesignElement[i], Object.prototype.toString.call(input) === '[object Date]', !this.disableDate());
  if ((Object.prototype.toString.call(input) === '[object Date]') && !this.disableDate()) {
    this.disableUpdateBtn = false;
    console.log("Date is Valid!!");
  } else {
    this.disableUpdateBtn = true;
    console.log("Date is Invalid!!");
  }
} else {
  console.log(input, this.milestoneData.maintenanceCountryAssumption[ii].trialDesignElement[i], Object.prototype.toString.call(input) === '[object Date]', !this.disableDate());
  this.disableUpdateBtn = true;
  console.log("Date is Invalid!!");
}

}

dateFilter(firstPatientInDate) { return new Date(firstPatientInDate); }

我在照顾 !=null 时在这里做错了，但在这里仍然验证不成功。

Answer 1

disableDate(): boolean {
    let dateError = false;
    for (let i = 0; i < this.milestoneData.maintenanceCountryAssumption.length; i++) {
      for (let j = 0; j < this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement.length; j++) {
        const d1 =         this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j].firstPatientInDate;
        let date1 = new Date(d1);
        //console.log(this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j], date1);
        const d2 = this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j].lastPatientInDate;
        let date2 = new Date(d2);
        //console.log(this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j], date2);
        if (date1 > date2 && (d1 != null && d2 != null)) {
          // console.log(date1, date2);
          dateError = true;
          this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j]['lpiError'] = true;
          //break;
        } else {
          this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j]['lpiError'] = false;
        }
      }
    }
    return dateError;
}

我认为是因为您使用过let date1 = new Date(...)并且new Date(null)永远不会为空。

this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j].firstPatientInDate !== null && 
this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j].lastPatientInDate !== null

是当前的。