无法调用可能 'undefined' 的对象 - 可选链接未删除错误

Question

正在尝试实现自定义表单控件。我将严格模式设置为 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 中重现了这个问题，请注意，禁用严格模式可以解决问题并且代码可以按预期工作。

Answer 1

setDisabledState是ControlValueAccessor接口中的可选属性： https://angular.io/api/forms/ControlValueAccessor

因此，它可能不是函数。

您也可以向方法调用添加可选链接，这应该可以解决您的错误：

this.formControlDirective?.valueAccessor?.setDisabledState?.(isDisabled);

无法调用可能 'undefined' 的对象 - 可选链接未删除错误

Cannot invoke an object which is possibly 'undefined' - Optional chaining not removing error

angular

typescript

angular-reactive-forms