Angular 10中如何根据输入值条件禁用Material单选按钮

要实现「输入框为空时禁用单选按钮」的效果，直接在<mat-radio-button>上绑定disabled属性即可，利用模板引用变量location4实时判断输入框内容：

修改后的模板代码 #

<div class="question">
  <div class="row">
    <h5>Audbase</h5>
  </div>
  <mat-radio-group class="radio-group" (change)="onRadioChange(4, $event.value)">
    <!-- 新增[disabled]绑定，判断输入框是否为空或全空格 -->
    <mat-radio-button class="radio-item" 
                      [value]="location4.value"
                      [disabled]="!location4.value || location4.value.trim() === ''">
      <input #location4 ngModel="location4" type="text" class="form-control" id="location4" name="location4" 
             (click)="$event.stopPropagation()" placeholder="Enter location..."/>
    </mat-radio-button>
  </mat-radio-group>
</div>

逻辑说明 #

• [disabled]="!location4.value || location4.value.trim() === ''"：当输入框location4的值为空，或者去掉首尾空格后为空时，单选按钮处于禁用状态；用户输入有效内容后，禁用自动解除。
• 保留你原有的(click)="$event.stopPropagation()"，避免点击输入框时触发单选按钮的选中事件，这个处理是正确的。

可选优化（更规范的表单绑定方式） #

如果希望把输入框的值绑定到组件类的属性（符合Angular表单最佳实践），可以调整成双向绑定：

1. 组件类中定义属性：

location4Value: string = '';

2. 修改模板：

<mat-radio-button class="radio-item" 
                  [value]="location4Value"
                  [disabled]="!location4Value || location4Value.trim() === ''">
  <input [(ngModel)]="location4Value" type="text" class="form-control" id="location4" name="location4" 
         (click)="$event.stopPropagation()" placeholder="Enter location..."/>
</mat-radio-button>

这样可以在组件类中直接访问输入框的值，方便后续扩展其他逻辑。

你的onRadioChange方法已经做了空值判断，无需额外修改，确保不会把空值添加到模型中。

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