Angular 4中点击单选按钮时禁用文本框的实现方法

嘿，我来帮你搞定这个单选按钮控制文本框禁用的需求！下面是针对Angular 4模板驱动表单的具体实现方案：

我们可以通过Angular的ngModel绑定单选框状态，再结合[disabled]指令来实现点击单选按钮时动态禁用/启用文本框的功能，步骤如下：

1. 完善并修改表单模板 #

先补全你的表单代码，添加必要的绑定逻辑：

<form #myForm="ngForm" (ngSubmit)="registerUser(myForm)">
  <table class="table borderless">
    <tbody>
      <!-- 单选按钮组 -->
      <tr style="width: 100%">
        <td>
          <div class="form-group">
            <input 
              type="radio" 
              name="ffStatus" 
              value="radio1" 
              [(ngModel)]="selectedStatus" 
              checked> 
            radio1<br>
          </div>
        </td>
        <td>
          <div class="form-group">
            <input 
              type="radio" 
              name="ffStatus" 
              value="radio2" 
              [(ngModel)]="selectedStatus"> 
            radio2<br>
          </div>
        </td>
      </tr>
      <!-- 受控制的文本框 -->
      <tr>
        <td colspan="2">
          <div class="form-group">
            <label>目标文本框：</label>
            <input 
              type="text" 
              class="form-control" 
              name="userInput" 
              ngModel
              <!-- 根据单选框选中状态动态禁用 -->
              [disabled]="selectedStatus === 'radio2'">
          </div>
        </td>
      </tr>
      <!-- 提交按钮 -->
      <tr>
        <td colspan="2">
          <button type="submit" class="btn btn-primary">提交</button>
        </td>
      </tr>
    </tbody>
  </table>
</form>

2. 组件类中定义绑定属性 #

在对应的组件.ts文件里，定义用于跟踪单选框状态的属性：

import { Component } from '@angular/core';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  // 初始化选中状态，和模板里的checked属性对应
  selectedStatus: string = 'radio1';

  registerUser(form: any) {
    // 这里处理表单提交逻辑
    console.log(form.value);
  }
}

3. 逻辑说明 #

• 我们给两个单选按钮绑定了[(ngModel)]="selectedStatus"，当用户点击单选按钮时，selectedStatus会自动同步为对应按钮的value值（radio1或radio2）。
• 文本框的[disabled]属性绑定了判断表达式：selectedStatus === 'radio2'，意思是选中radio2时禁用文本框，选中radio1时启用文本框，你可以根据需求调整这个表达式的判断条件。

额外优化提示 #

如果需要更复杂的禁用逻辑，可以把判断逻辑封装成组件内的方法：

shouldDisableInput(): boolean {
  // 这里可以添加多条件判断等复杂逻辑
  return this.selectedStatus === 'radio2';
}

然后模板中修改为：

[disabled]="shouldDisableInput()"

内容的提问来源于stack exchange，提问作者Raj