Angular中mat-select-list自由文本选项的勾选交互优化

1. 快速修复：阻止输入框点击冒泡 #

问题根源是mat-list-option默认点击整个区域都会触发勾选，包括内部的输入框。直接给输入框添加事件阻止冒泡，同时确保输入值能同步到选项的value：

修改最后一个选项的代码：

<mat-list-option class="col-md-3" checkboxPosition="before" [value]="other13Value">
  Other 
  <input 
    [(ngModel)]="other13Value"
    type="text" 
    class="form-control other" 
    id="other13" 
    name="other13" 
    placeholder="Enter data as required..."
    (click)="$event.stopPropagation()"
  />
</mat-list-option>

组件类中声明对应变量：

other13Value: string = '';

这样点击输入框时不会触发勾选，输入的内容也能实时作为选项的value。

2. 更清晰的交互实现方案 #

如果想彻底划分交互边界，避免误触，可改用mat-checkbox单独控制选中状态，输入框仅负责内容输入：

<div class="col-md-3">
  <mat-checkbox [(ngModel)]="isOtherChecked">Other</mat-checkbox>
  <input 
    *ngIf="isOtherChecked"
    [(ngModel)]="other13Value"
    type="text" 
    class="form-control other" 
    id="other13" 
    name="other13" 
    placeholder="Enter data as required..."
  />
</div>

这种方式需要调整原有的onApplicationSelection逻辑，手动将该选项的选中状态和输入值整合到最终数据中，但交互逻辑更明确，完全不会出现误触问题。

原理说明 #

mat-list-option默认监听整个元素区域的点击事件来切换选中状态，stopPropagation()能阻止输入框的点击事件向上传递到父级，从而避免触发勾选操作。双向绑定[(ngModel)]则保证输入内容实时同步为选项的value，不影响后续数据处理。

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