Tal como indica este problema , si intenta acceder a un ngControl.control con una Directiva:
export class DisabledDirective { @Input() set opDisabled(condition: boolean) { const action = condition ? 'disable' : 'enable'; this.ngControl.control[action](); } constructor(private ngControl: NgControl) {} }Llegará a un error en la primera representación:
core.js:5828 ERROR TypeError: Cannot read property 'disable' of undefinedLa solución en el enlace dado es bastante hacky y poco confiable.
Hasta que solucionen el problema, simplemente proteja la expresión con if-s para la primera representación:
export class DisabledDirective { @Input() set opDisabled(condition: boolean) { const action = condition ? 'disable' : 'enable'; if(this.ngControl?.control){ this.ngControl.control[action](); } } constructor(private ngControl: NgControl) {} }pd .: observe el nuevo operador de caja fuerte/elvis que también puede usar en Angular 9 en el código TS :)
La solución es usar el ciclo de vida OnChanges (como se menciona en la edición oficial)
@Directive({ selector: '([formControlName], [formControl])[disableControl]' }) export class DisableControlDirective implements OnChanges { @Input() disableControl = false; ngOnChanges(changes: SimpleChanges) { if (changes.disableControl) { this.ngControl.control?.disable(); } else { this.ngControl.control?.enable(); } } constructor(private ngControl: NgControl) {} }El uso será como
<input formControlName="id" [disableControl]="true" />