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

Question

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

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

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

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

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

Answer 2

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

<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 属性，如添加的 link.

所示

来自angular docs

Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

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

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

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

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

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

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

radio button's disabled property is not working inside the reactive form

javascript

angular

angular-forms

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

radio button's disabled property is not working inside the reactive form

javascript

angular

angular-forms

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