0
144
ViewsLa validación de la fecha del material angular no ocurre como se esperaba
Estoy trabajando en mat-datepicker donde el usuario puede ingresar el valor y elegir la fecha con mi código. Funciona correctamente. Tengo un botón de actualización por defecto, estará en modo deshabilitado. Cuando el usuario cumple dos condiciones verdaderas, solo se habilitará el botón de actualización.
Aquí está mi captura de pantalla, se verá así
Si borro la última fecha, el botón de actualización estará en modo deshabilitado una vez que el usuario ingrese la última fecha, entonces solo se habilitará la actualización. Tengo un problema.
Aquí está mi código ts
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!!"); } } Aquí está mi código HTML para el botón Actualizar
<button mat-flat-button color="primary" (click)="updateMilestone();" cdkFocusInitial [disabled]="disableUpdateBtn"> Update </button> Recibo el error cuando hago clic en el botón Borrar, luego empiezo a escribir la fecha y luego escribo 01 . No recibo ningún error, pero cuando empiezo a escribir Dec
Estaba comprobando incluso nulo para la entrada en la condición if ¿Por qué todavía esto no puede leer las propiedades nulas ?
2 answers
Answer question0
Intente cambiar esto: input.length a: input?.length en su código (todas las instancias)
0
El error que aparece en la consola está en la línea console.log (que está antes de la verificación null ):
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 ... } ... }Para evitar esto, ya sea:
- Use el encadenamiento opcional cambiando todas sus instancias de
input.lengthainput?.length.
dateValidator(input) { console.log(Object.prototype.toString.call(input) === '[object Date]', !this.disableDate(), input?.length > 0) if (!!input) { // null check ... } ... }- O bien, mueva la línea
console.logdentro del ámbito de verificaciónifnull.
dateValidator(input) { if (!!input) { // null check console.log(Object.prototype.toString.call(input) === '[object Date]', !this.disableDate(), input.length > 0) } ... }- O simplemente elimine la línea
console.log.