Angular 10：无法在动态创建的表单内禁用单选框上的文本框

问题描述

当我选择其中一个单选按钮时，每个文本框后面都有两个单选按钮，相应的文本框应该被启用，而另一个文本应该被禁用。

作为参考，我附上了一个我尝试复制问题的 stackblitz 代码。好吧，只有当我尝试禁用表单中的文本框时才会发生这种情况。

Sample code - click here

它真的很连接我尝试了所有来源，但不幸的是无法获得解决方案。我也尝试过使用诸如 disable() enable() 之类的表单控制方法，但没有任何解决方案。

解决方法

您可以尝试将其作为解决方法。以后找到更好的解决方案。但以下工作。

[attr.disabled]="radio2BoxDisabled ? true: null"

,

将您的 toggle() 函数更改为以下代码。它适用于包含表单控件名称的 Stackblitz 代码版本。当然，对于多个表单组，您将不得不以另一种方式管理索引。

  toggle(event) {
    if (event.value == "radio1") {
      this.t.at(0).get ('ref').enable();
      this.t.at(0).get ('link').disable();
    } else if (event.value == "radio2") {
      this.t.at(0).get ('ref').disable();
      this.t.at(0).get ('link').enable();
    }
  }

,

您不能简单地使用表单控件禁用直接输入。您需要在表单构建器中对其进行初始化

this.formBuilder.group({
          radio: [""],ref: [{value:'',disabled: this.radio2BoxDisabled}],link: [{value:'',disabled: this.radio1BoxDisabled}]
        })

我已经更新了您的 StackBlitz，请在此处查看：https://stackblitz.com/edit/angular-ivy-mswvnb?file=src%2Fapp%2Fapp.component.ts

查看有关您的问题的更多说明： Disable Input fields in reactive form