Material date empty condition check Update button disable

Question

Team,

I am using Angular Mat date picker where I hve a condition that is if any of the mat datepicker is empty my update button should be in disabled mode.

In my code I am checking null but still Button is enabled

Here is my HTML code

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

Here is my ts code

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

Here is my dateValidator

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

What I am doing wrong here while I am taking care !=null but still validation is not success here.

You shoud use ReactiveForms. Using reactive forms you can define the fields as. required and the only this to do is to check if the form is valid. Example can be find within the documentation of angular.io — Thomas Renger, Dec 05 '21 at 07:54
@ThomasRenger thanks for your comment but I have all done here Now I can't switch to reactive form could you please help me here — Mr.M, Dec 05 '21 at 07:55
@ThomasRenger thanks for your comment but I have all done here Now I can't switch to reactive form could you please help me here — Mr.M, Dec 05 '21 at 08:15

score -2 · Answer 1 · edited Dec 06 '21 at 01:14

-2

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

I think because you used let date1 = new Date(...) and new Date(null) is never null.

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

is current.

edited Dec 06 '21 at 01:14

Peter Csala

17,736
16
35
75

answered Dec 05 '21 at 10:16

Saba Sojoodi

57
2

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 05 '21 at 10:46
@Saba Sojoodi means i need put !==null – Mr.M Dec 05 '21 at 11:37
so you mean i need to put tlike this let date1 =this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j].firstPatientInDate !== null – Mr.M Dec 05 '21 at 11:41
can you please more clear – Mr.M Dec 05 '21 at 11:42
I mean please check it: – Saba Sojoodi Dec 05 '21 at 11:44
i want to check that way only right in disableDate – Mr.M Dec 05 '21 at 11:45
no buddy that way not workiing – Mr.M Dec 05 '21 at 11:47
if i removed newDate that won't convert as date format right – Mr.M Dec 05 '21 at 11:48
I edit your code and put it – Saba Sojoodi Dec 05 '21 at 11:51
@SabaSojoodi just want to understand I did very similarly right – Mr.M Dec 05 '21 at 12:03
@SabaSojoodi i tried your code till that button is enable only – Mr.M Dec 05 '21 at 12:06
@SabaSojoodi I have added few more code for reference – Mr.M Dec 05 '21 at 12:08
@SabaSojoodi can you please help me here – Mr.M Dec 05 '21 at 13:43
did solve your problem? – Saba Sojoodi Dec 12 '21 at 09:53

Material date empty condition check Update button disable

1 Answers1