• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

156
Vistas
Angular material Date validation not happening as expected

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

enter image description here

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.

enter image description here

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

over 3 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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

over 3 years ago · Santiago Trujillo Denunciar

0

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
        ...
    }
    ...
}
  1. 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)
    }
    ...
}
  1. Or, simply remove the console.log line.
over 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda