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

【问题标题】：Angular 10: Unable to disable text box on radio selection inside a dynamicaly created formAngular 10：无法在动态创建的表单内禁用单选选项的文本框
【发布时间】：2021-06-15 14:04:54
【问题描述】：

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

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

Sample code - click here

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

【问题讨论】：

您可以记录事件并检查控制台。您需要更新条件。或订阅电台 valueChanges 并相应更新。
@SachinGupta 我试过了，我在收音机输入上得到了我的更改值，但这里的问题是文本框禁用属性没有按预期工作。
如果您删除 formControlName，它将起作用。所以，这意味着问题就在那里。尝试找出原因。
@rdr20 我尝试删除收音机上的 formControlName 仍然无法正常工作。无法从文本框中删除它，因为我在尝试保存时需要该值，并且我会有很多这样的单选文本框块，如上所述它是一个动态表单。
如果你要删除formcontrolname，它会起作用。但我知道你需要那个。但是，你可以从那里开始。

标签： angular angular-reactive-forms angular-forms reactive-forms angular-formbuilder

【解决方案1】：

你可以试试这个作为一种解决方法。以后再找更好的解决办法。但以下工作。

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

【讨论】：

我怎么会错过这么小的逻辑，而且我发现我们可以使用 [readonly]= "radio2BoxDisabled" 而不是禁用，可以达到预期的效果。

【解决方案2】：

将您的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();
    }
  }

【讨论】：

【解决方案3】：

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

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

【讨论】：