Angular中多选按钮组控制输入框禁用及标签切换的可行性问询

这个需求完全可以实现，你当前的代码逻辑已经能达成预期效果，不过可以做些优化让代码更简洁。

现有代码的逻辑说明 #

• 开启multiple模式的mat-button-toggle-group，选中的按钮值会以数组形式存在toggleButton.value里。
• 输入框的[disabled]绑定!!toggleButton.value.length，只要有按钮被选中（数组长度大于0），输入框就会被禁用，符合需求。
• 两个mat-label通过*ngIf判断数组长度，分别显示对应提示文本，也完全匹配需求场景。

优化后的简洁写法 #

可以将两个重复的mat-label合并，用三元表达式动态切换文本：

<mat-form-field>
  <input matInput #filterBox [disabled]="!!toggleButton.value.length" />
  <mat-label>
    {{ toggleButton?.value?.length > 0 ? '搜索框已锁定' : '搜索框' }}
  </mat-label>
</mat-form-field>

<mat-button-toggle-group #toggleButton="matButtonToggleGroup" multiple>
  <mat-button-toggle value="TEST1">1</mat-button-toggle>
  <mat-button-toggle value="TEST2">2</mat-button-toggle>
  <mat-button-toggle value="TEST3">3</mat-button-toggle>
</mat-button-toggle-group>

这样代码结构更紧凑，逻辑和原代码完全一致，同样能实现：选中任意按钮（包括多选）时禁用输入框并显示“搜索框已锁定”；未选中任何按钮时输入框可用，显示“搜索框”。

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