Question

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

我有一个状况，例如当前状态为 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 >

我需要禁用单选按钮

Answer 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。我提供的解决方案更多是一种解决方法，可以单独禁用单选按钮。

Answer 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]。

单选按钮的disabled属性在反应形式内不起作用

2 个答案: