Angular material Date validation not happening as expected

Question

I am working on mat-datepicker where the User can enter the value and choose the date with my code It's working properly. I have an update button by default it will be in disabled mode. When the user met two conditions true then only the update button will enable.

Here is my screenshot it will look like

If I clear the last date the update button will be in disable mode once the user enter the last date then only the update will enable here I got an issue

Here is my ts code

dateValidator(input) {
    //console.log(input);
    console.log(Object.prototype.toString.call(input) === '[object Date]', !this.disableDate(), input.length > 0)
    if (!!input) { // null check
        if (Object.prototype.toString.call(input) === '[object Date]' && !this.disableDate() && input.length > 0) {
            this.disableUpdateBtn = false;
            console.log("Date is Valid!!");
        } else {
        this.disableUpdateBtn = true;
        console.log("Date is Invalid!!");
        }
    } else {
        this.disableUpdateBtn = true;
        console.log("Date is Invalid!!");
    }
}

Here is my HTML code for the Update button

<button mat-flat-button color="primary" (click)="updateMilestone();" cdkFocusInitial [disabled]="disableUpdateBtn">
    Update
</button>

I am getting the error when I click the clear button, then I start typing the date, and then I type 01. I am not getting any error but when I start typing Dec.

I was checking even null for input in the if condition Why still this is cannot read the null properties

Answer 1

Try to change this: input.length to: input?.length in your code (all instances)

Answer 2

The error appearing on the console is on the console.log line (which is before the null check):

dateValidator(input) {
    // error on the next line, because `input` is `null`, and you're trying to read the `length`.
    console.log(Object.prototype.toString.call(input) === '[object Date]', !this.disableDate(), input.length > 0)
    if (!!input) { // null check
        ...
    }
    ...
}

In order to get around this, either:

1. Use optional chaining by changing all your instances of input.length to input?.length.

dateValidator(input) {
    console.log(Object.prototype.toString.call(input) === '[object Date]', !this.disableDate(), input?.length > 0)
    if (!!input) { // null check
        ...
    }
    ...
}

2. Or, move the console.log line inside the if null check scope.

dateValidator(input) {
    if (!!input) { // null check
        console.log(Object.prototype.toString.call(input) === '[object Date]', !this.disableDate(), input.length > 0)
    }
    ...
}

3. Or, simply remove the console.log line.