javascript - 单选按钮的禁用属性在 react 形式中不起作用

Question

单选按钮的禁用属性在 react 表单内不起作用，但当我将单选按钮放在 react 表单外部时它工作正常。

我有一个条件，比如我当前的状态是已关闭，我应该允许用户在 react 表单内编辑单选按钮，我已经尝试过使用单选按钮的“禁用”属性，但没有运气

组件.ts

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

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

在使用响应式(Reactive)表单时不要使用模板驱动方法。你的代码如下:

<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

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 。我提供的解决方案更多的是实现单独禁用单选按钮的解决方法。