【问题标题】：Angular Material - mat-form-field prevent click events using stopPropagation is not workingAngular Material - mat-form-field 使用 stopPropagation 防止点击事件不起作用
【发布时间】：2022-06-10 23:23:18
【问题描述】：

无法单击mat-form-field 的mat-label 内的单选按钮。 mat-form-field 上的点击事件被传递到选择字段。有没有办法防止这种行为？

我尝试了<mat-form-field (click)=$event.stopPropagation()，但没有成功。

<mat-form-field floatLabel="always">
    <mat-label>
       <div fxLayout="row" fxLayoutAlign="start center">
         <span>Title</span>
         <mat-radio-group [(ngModel)]="groupSelection" name="groupSelection">
           <mat-radio-button value="option A">
              Option A
           </mat-radio-button>
           <mat-radio-button  value="option B">
              Option B
           </mat-radio-button>
        </mat-radio-group>
      </div>
   </mat-label>
   <mat-select [(ngModel)]="optionSelection">
      <mat-option *ngFor="let option of options" [value]="optionVal">
          {{option}}
      </mat-option>
   </mat-select>
</mat-form-field>

工作演示

StackBlitz Demo

提前致谢！

【问题讨论】：

你能在 Stackblitz 上重现它吗？
更新了 Stackblitz 演示。
到目前为止，我可以选择单选按钮，但是每次单击单选按钮时，都会打开选择...我认为这不是所需的结果。单选按钮确实会被选中

标签： angular angular-material

【解决方案1】：

好吧，我在这里做了几件事来让它发挥作用。我将单选按钮和按 div 的选择分开。然后我停止了单选按钮和标题范围的传播。呃，太丑了

<h1>Radio Buttons in Mat-label (unable to click)</h1>

<mat-form-field floatLabel="always" style="width: 300px">
  <div>
  <mat-label>
    <div fxLayout="row" fxLayoutAlign="start center">
      <span (click)="$event.stopPropagation()">Title</span>
      <mat-radio-group [(ngModel)]="groupSelection" style="margin-left: 50px">
        <mat-radio-button value="optionA" (click)="$event.stopPropagation()"> Option A </mat-radio-button>
        <mat-radio-button value="optionB" style="margin-left: 25px"
        (click)="$event.stopPropagation()">
          Option B
        </mat-radio-button>
      </mat-radio-group>
    </div>
  </mat-label>
</div>
  <div>
  <mat-select>
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</div>
</mat-form-field>

【讨论】：

感谢您试一试。是的，这与将标签移到 mat-form-field 之外并使用一些 CSS 使其看起来像浮动标签一样。也许这是唯一的选择。