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

I believe tying the elements to a reactive form and then adding in validation on the formcontrol the angular way may alleviate this problem, since it should be easier to check the value during validation — iamaword, Dec 03 '21 at 17:05
One option that may also help is to set validation on blur. updateOn: "blur" on the formcontrols. — iamaword, Dec 03 '21 at 17:06
The null check is after the console log. The error is triggered there. — kvetis, Dec 04 '21 at 19:15
Remove the line `console.log(Object.prototype.toStrin....);` — luiscla27, Dec 08 '21 at 21:37
You are trying to read property `length` before checking for null value, delete the preceding console log — newt, Dec 10 '21 at 16:57

score 2 · Answer 1 · edited Dec 13 '21 at 09:30

2

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

edited Dec 13 '21 at 09:30

Audwin Oyong

2,247
3
15
32

answered Dec 11 '21 at 09:10

Juan Vicente Berzosa Tejero

2,786
2
5
15

1

Safe navigation operator is a pretty new feature of Typescript (3.7 and above), I would not assume that he's on a compatible release. – noamyg Dec 12 '21 at 13:45

Audwin Oyong · Answer 2 · 2021-12-12T13:46:41.377

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:

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

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

Or, simply remove the console.log line.

Angular material Date validation not happening as expected

2 Answers2