Javascript 单选按钮'；s disabled属性在被动窗体内不起作用

单选按钮的disabled属性在被动窗体内不起作用，但当我将单选按钮置于被动窗体外时，它工作正常

我有一个条件，比如如果我的当前状态是已关闭，我应该允许用户在我已尝试使用单选按钮的Disabled属性的被动表单中编辑单选按钮，但没有成功

组件。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 >

通过
失败

---

我需要禁用单选按钮

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

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

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

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

// 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]

在使用被动表单时，不要使用模板驱动的方法。您的代码如下所示：

<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>

通过
失败

请参见此处的示例：

您会注意到，我使用了

attr.disabled

而不是

disabled

来禁用单个单选按钮。 要了解

attr.disabled

和

disabled

之间的区别，您可以查看。在要点中，

attr.disabled

是一个HTML属性，而

disabled

是一个DOM属性。有些HTML属性的DOM属性不存在，如添加的链接所示

从

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

• 一些HTML属性具有与属性的1:1映射。id就是一个例子
• 某些HTML属性没有相应的属性。科尔斯潘就是一个例子
• 某些DOM属性没有相应的属性。textContent就是一个例子
• 许多HTML属性似乎映射到属性。。。但不是你想象的那样

---

对于输入框和禁用的

DOM属性，情况并非如此。确实有一个
禁用的
DOM属性，但是在单选按钮上单独使用它时存在一些问题。看这个。我提供的解决方案更多的是一种解决方法，可以实现单选按钮的单独禁用。
Plz使用ng-run.com发布一个示例。不要将模板驱动方法与反应式表单一起使用。如果您使用的是被动表单，那么不要使用
ngModel
它工作正常，但是为什么我需要使用[attr.disabled]为什么不使用[disabled]。我找不到任何关于[attr.disabled]的文档。您能解释一下吗