单选按钮的 disabled 属性在反应式表单中不起作用答案

【问题标题】：radio button's disabled property is not working inside the reactive form单选按钮的 disabled 属性在反应式表单中不起作用
【发布时间】：2019-04-23 11:40:09
【问题描述】：

单选按钮的 disabled 属性在反应式表单内不起作用，但当我将单选按钮放在反应式表单外时它工作正常。

我有一个条件，比如我的当前状态是 CLOSED 我应该允许用户在我已经尝试过使用单选按钮的 Disabled 属性但没有运气的反应表单中编辑单选按钮

component.ts

conducttestlm:any={
    isReadOnly:false
}
this.condutTestLM=this.formBuilder.group({
    "testStatus":['',Validators.required],
})
if(success.data.status=='CLOSED'){
    this.conducttestlm.isReadOnly=true;
}

component.html

<form [formGroup]="condutTestLM">
    <div class="row radio-top">
        <div class="col-md-6 p-l-15">
            <label class="radio-box">
                <input formControlName="testStatus" name="testStatus" [(ngModel)]="conducttestlm.teststatus" [disabled]="conducttestlm.isReadOnly" value="Pass" type="radio">
                <span class="checkmark"></span>
                <span class="font-style">Pass</span>
            </label>
        </div>
        <div class="col-md-6 p-l-15">
            <label class="radio-box">
                <input formControlName="testStatus" name="testStatus" [(ngModel)]="conducttestlm.teststatus"  [disabled]="conducttestlm.isReadOnly" value="Fail" type="radio">
                <span class="checkmark"></span>
                <span class="font-style">Fail</span>
            </label>
        </div>
    </div>
</form >

我需要禁用单选按钮

【问题讨论】：

请使用 ng-run.com 发布示例。
不要将模板驱动的方法与反应式表单一起使用。如果您使用的是响应式表单，请不要使用 ngModel

标签： javascript angular angular-forms

【解决方案1】：

在使用响应式表单时不要使用模板驱动的方法。让你的代码像：

<form [formGroup]="condutTestLM">
  <div class="row radio-top">
      <div class="col-md-6 p-l-15">
        <label class="radio-box">
          <input formControlName="testStatus" name="testStatus" [attr.disabled]="conducttestlm.isReadOnly ? true : null" value="Pass" type="radio">
          <span class="checkmark"></span>
          <span class="font-style">Pass</span>
        </label>
      </div>
      <div class="col-md-6 p-l-15">
        <label class="radio-box">
          <input formControlName="testStatus" name="testStatus" [attr.disabled]="conducttestlm.isReadOnly ? true: null" value="Fail" type="radio">
          <span class="checkmark"></span>
          <span class="font-style">Fail</span>
        </label>
      </div>
    </div>
</form>

在此处查看示例：https://stackblitz.com/edit/angular-dncxac?file=src%2Fapp%2Fapp.component.html

您会注意到我使用attr.disabled 而不是disabled 来禁用单个单选按钮。要了解attr.disabled 和disabled 之间的区别，您可以查看this link。概括地说，attr.disabled 是一个 HTML 属性，而disabled 是一个 DOM 属性。有一些 HTML 属性不存在 DOM 属性，如添加的链接所示。

来自angular docs

属性由 HTML 定义。属性由 DOM（文档对象模型）定义。

一些 HTML 属性具有 1:1 映射到属性。 id 就是一个例子。

某些 HTML 属性没有相应的属性。 colspan 就是一个例子。

某些 DOM 属性没有相应的属性。 textContent 就是一个例子。

许多 HTML 属性似乎映射到属性...但不是您想象的那样！

这不适用于输入框和disabled DOM 属性。确实有一个disabled DOM 属性，但是在单选按钮上单独使用它时存在一些问题。请参阅此Github issue。我提供的解决方案更多的是实现单独禁用单选按钮的解决方法。

【讨论】：

它工作正常，但为什么我需要使用 [attr.disabled] 为什么不使用 [disabled]。我找不到任何关于 [attr.disabled] 的文档。你能解释一下吗

【解决方案2】：

一种可能性是渲染时未检测到状态更改。首先：

// instead of using this: 
[disabled]="conducttestlm.isReadOnly"

// Use the readonly attribute:
[readonly]="conducttestlm.isReadOnly"

接下来，使用ChangeDetectorRef 手动检测任何更改：

// import it: 
import { ChangeDetectorRef } from '@angular/core';

// and inject it into your contructor:
constructor(private ref: ChangeDetectorRef) {
    ...
}

// call it
if(success.data.status=='CLOSED'){
    this.conducttestlm.isReadOnly=true;
    this.ref.detectChanges();
}

应该在运行时立即检测到状态变化。如果没有，请尝试控制台记录您的 conducttestlm.isReadOnly 值以确保它正在更改。

如果你想使用模板驱动属性，你也可以使用[attr.disabled] 而不是[disabled]。

【讨论】：