如何根据下拉列表中的选定值动态更改占位符的值？

Question

我有一个下拉列表，其中包含：父亲、母亲和监护人。后面是一个没有占位符的输入文本框。我希望文本框的占位符根据所选值动态更新

我尝试在 ts 文件部分中为占位符属性分配一个字符串。但它只能选择那个特定的值。我希望它选择 *ngIf

this is the select drop-down

<mat-select placeholder="Relation to Student"formControlName="relationType">
    <mat-option *ngFor="let relation of relationType" [value]="relation">
         {{ relation }}
    </mat-option>
</mat-select>

this is the html input

<input matInput placeholder="{{related}} " formControlName="fatherFullName" required>

this is the ts and i know this isn't how it works. i'm sure of adding an "if" but i'm not sure of how to do it

related = ' Father's full name';

我期待的结果是，如果在选择下拉菜单中选择了父亲，则输入文本框中的占位符应该是父亲的全名。

提前致谢！

Answer 1

嗨，我想这就是你要的：

在你的 html 中

    <mat-form-field class="example-full-width">
    <input matInput placeholder="{{str}}" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <mat-select [(ngModel)]="changeData" (ngModelChange)="test()" name="dropBox">
      <mat-option value="relation1">relation1</mat-option>
      <mat-option value="relation2">relation2</mat-option>
      <mat-option value="relation3">relation3</mat-option>
    </mat-select>
  </mat-form-field>

现在在你的 ts 文件中

str =  '';
changeData:any ;
test(){
  console.log("rest");
  this.str = this.changeData;
}