Angular 在取决于垫选择的输入中显示不同的占位符答案

【问题标题】：Angular displaying a different placeholder in an input dependant on a mat selectAngular 在取决于垫选择的输入中显示不同的占位符
【发布时间】：2021-10-27 06:01:04
【问题描述】：

我正在尝试根据我在 mat-select 中选择的内容在 mat-input 中显示不同的占位符文本，但我似乎无法找到将其绑定到我选择的选项的方法。

<mat-form-field appearance="outline" class="search-field" style="width:40vw">
          <input matInput type="text" class="input" placeholder="Enter a Plant No" formControlName="searchQuery">
          <mat-select name="ampm" class="ampm" style="width:10vw;" [value]="selected">
            <mat-option value="PLANT_NO">PLANT_NO</mat-option>
            <mat-option value="EQUIP_NO" disabled>EQUIP_NO</mat-option>
            <mat-option value="LOCN_DESC" disabled>LOCN_DESC</mat-option>
            <mat-option value="EQUIP_GRP_ID" disabled>EQUIP_GRP_ID</mat-option>
            <mat-option value="EQUIP_CLS" disabled>EQUIP_CLS</mat-option>
            <mat-option value="MAINT_ZONE_NAM" disabled>MAINT_ZONE_NAM</mat-option>
            <mat-option value="PRNT_PLNT_NO" disabled>PRNT_PLNT_NO</mat-option>
            <mat-option value="SUBSTATION" disabled>SUBSTATION</mat-option>
            <mat-option value="IP_PLNT_NO" disabled>IP_PLNT_NO</mat-option>
          </mat-select>
          <button mat-icon-button title="Search">
            <mat-icon>search</mat-icon>
          </button>
</mat-form-field>

【问题讨论】：

标签： html angular

【解决方案1】：

您可以使用[placeholder] 属性绑定和mat select change 事件，您可以根据需要进行更新。

inputPlaceholderUpdate = "Enter a Plant No";

selectChange(event){
   const value = event.value;
   this.inputPlaceholderUpdate = value == 'PLANT_NO' ? 'Enter a Plant No' : value == 'EQUIP_NO' ? 'Enter a Equip No' : 'Enter a Locn Desc';
}

html

<input matInput type="text" class="input" [placeholder]="inputPlaceholderUpdate" formControlName="searchQuery">
<mat-select name="ampm" class="ampm" style="width:10vw;" [value]="selected" (selectionChange)= "selectChange($event)">
......
......
</select>

【讨论】：