无法调用可能 'undefined' 的对象 - 可选链接未删除错误
Cannot invoke an object which is possibly 'undefined' - Optional chaining not removing error
正在尝试实现自定义表单控件。我将严格模式设置为 true
并且不想删除它。除了 setDisabledState
之外,实现控制值访问器函数都与可选链接一起工作。即使对可能 undefined
的值进行隐式检查也无法解决问题。
相关代码:
@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) { }
// .... more code
// ISSUE BELOW!!!
setDisabledState(isDisabled: boolean): void {
if (this.formControlDirective && this.formControlDirective.valueAccessor) {
this.formControlDirective.valueAccessor.setDisabledState(isDisabled);
}
}
错误是:
Cannot invoke an object which is possibly 'undefined'.
我在这个 STACKBLITZ 中重现了这个问题,请注意,禁用严格模式可以解决问题并且代码可以按预期工作。
setDisabledState
是ControlValueAccessor
接口中的可选属性:
https://angular.io/api/forms/ControlValueAccessor
因此,它可能不是函数。
您也可以向方法调用添加可选链接,这应该可以解决您的错误:
this.formControlDirective?.valueAccessor?.setDisabledState?.(isDisabled);
正在尝试实现自定义表单控件。我将严格模式设置为 true
并且不想删除它。除了 setDisabledState
之外,实现控制值访问器函数都与可选链接一起工作。即使对可能 undefined
的值进行隐式检查也无法解决问题。
相关代码:
@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) { }
// .... more code
// ISSUE BELOW!!!
setDisabledState(isDisabled: boolean): void {
if (this.formControlDirective && this.formControlDirective.valueAccessor) {
this.formControlDirective.valueAccessor.setDisabledState(isDisabled);
}
}
错误是:
Cannot invoke an object which is possibly 'undefined'.
我在这个 STACKBLITZ 中重现了这个问题,请注意,禁用严格模式可以解决问题并且代码可以按预期工作。
setDisabledState
是ControlValueAccessor
接口中的可选属性:
https://angular.io/api/forms/ControlValueAccessor
因此,它可能不是函数。
您也可以向方法调用添加可选链接,这应该可以解决您的错误:
this.formControlDirective?.valueAccessor?.setDisabledState?.(isDisabled);