无法读取未定义的 属性 'disable'：this.ngControl.control 在 Ivy 中未定义

Question

就像 this issue states 一样，如果您尝试使用指令访问 ngControl.control：

export class DisabledDirective {
  @Input()
  set opDisabled(condition: boolean) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor(private ngControl: NgControl) {}
}

您将在第一次渲染时遇到错误：

core.js:5828 ERROR TypeError: Cannot read property 'disable' of undefined

Answer 1

给定 link 中的解决方案非常老套且不可靠。

在他们解决问题之前，只需在第一次渲染时用 if-s 保护表达式：

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) {}
}

ps.: 注意新的 safe/elvis 运算符，您也可以在 TS 代码中的 Angular 9 中使用它:)

Answer 2

解决方案是使用 OnChanges 生命周期（在官方问题中提到）

@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) {}
}

用法会像

<input formControlName="id" [disableControl]="true" />