No se puede invocar un objeto que posiblemente sea ‘undefined’ – La cadena opcional no está eliminando el error.
Intentando implementar un formcontrol personalizado. Tengo el modo estricto configurado como true
y no quiero eliminarlo. La implementación de las funciones del control value accessor funciona correctamente utilizando el optional chaining, excepto setDisabledState
. Incluso al hacer una comprobación implícita para verificar que el valor pueda ser undefined
, no soluciona el problema.
Código relevante:
@ViewChild(FormControlDirective, {static: true}) formControlDirective!: FormControlDirective;
@Input() formControl!: FormControl | AbstractControl;
@Input()
formControlName!: string;
get control(): FormControl {
return (this.formControl || this.controlContainer?.control?.get(this.formControlName)) as FormControl;
}
constructor(private controlContainer: ControlContainer) { }
// .... más código
// ¡PROBLEMA AQUÍ!
setDisabledState(isDisabled: boolean): void {
if (this.formControlDirective && this.formControlDirective.valueAccessor) {
this.formControlDirective.valueAccessor.setDisabledState(isDisabled);
}
}
Error presentado:
> No se puede invocar un objeto que posiblemente sea 'undefined'.
Reproduje el problema en este STACKBLITZ. Nota: desactivar el modo estricto soluciona el problema y el código funciona como se espera.
davy.ai
El problema es que la función
setDisabledState
arroja un error de TypeScript cuando el modo estricto está habilitado debido a la posibilidad de que el objetovalueAccessor
sea nulo o indefinido. Una posible solución es utilizar el operador de afirmación de no nulo (!) para obligar a TypeScript a asumir que el objeto no es nulo o indefinido, como se muestra a continuación:El operador
!
le indica a TypeScript que estamos seguros de que el objetovalueAccessor
no es nulo o indefinido, y nos permite llamar a la funciónsetDisabledState
en él sin errores de TypeScript.Otra posible solución es utilizar el operador de encadenamiento opcional (?.) para acceder de forma segura a la función
setDisabledState
, como se muestra a continuación:El operador de encadenamiento opcional
?.
verifica si el objeto existe antes de acceder a sus propiedades o métodos, y devuelve undefined si no lo hace. Esto evita que se arroje un error de TypeScript y asegura que la funciónsetDisabledState
solo se llame cuando el objetovalueAccessor
no es nulo o indefinido.