自定义反应性形式控制上禁用的设置导致最大呼叫堆栈大小超过

Question

我在我的角度项目中构建了一个自定义输入控件。一切都很好，除非我将禁用属性设置为true，否则某些无限循环发生在setDisabledState上，导致

preview-4adb70f742b91f09679fb.js:1 ERROR RangeError: Maximum call stack size exceeded
    at eval (model.ts:1519)
    at eval (model.ts:1531)
    at eval (model.ts:1493)
    at Array.forEach (<anonymous>)
    at FormGroup._forEachChild (model.ts:1493)
    at FormGroup._reduceChildren (model.ts:1530)
    at FormGroup._reduceValue (model.ts:1518)
    at FormGroup._updateValue (model.ts:1505)
    at FormGroup.AbstractControl.updateValueAndValidity (model.ts:575)
    at FormControl.AbstractControl._updateAncestors (model.ts:533)

我创建了一个stackblitz，显示问题：https：//stackblitz.com/edit/angular-n34zrj

我是否缺少有关设置内部FormControl的禁用属性的内容(使用Diabled((，enabled(((？

如果是这样，请让我知道如何解决这个问题。将我的头猛烈数小时。

Answer 1

如果您使用severin klugs中所述的错误，请通过停止不必要的呼叫来解决答案，但在应用函数之前检查它们是否相同

setDisabledState?(isDisabled: boolean): void {
    if(isDisabled == this.control.disabled) return;
    isDisabled ? this.control.disable() : this.control.enable();
}

Answer 2

在您的代码中，您可以通过设置禁用状态来强制循环，具体取决于布尔setDisabledState((param。在此方法中，您调用disable((/enable((，将调用setDisabledState((本身。

  setDisabledState?(isDisabled: boolean): void {
    isDisabled ? this.control.disable() : this.control.enable();
  }

https://netbasal.com/angular-custom-form-controls-made-easy-4f96341c8e2

尝试类似Netanel基础的事情：

  setDisabledState( isDisabled : boolean ) : void {
    const div = this.textarea.nativeElement;
    const action = isDisabled ? 'addClass' : 'removeClass';
    this.renderer[action](div, 'disabled');
  }