how to dynamically change the value of placeholder upon the selected values in the drop down?

问题

I have a drop down containing: father, mother and guardian. Followed by an input text-box with no placeholder on it. I wanted the placeholder of the text-box to update dynamically according to the value selected

I tried using assigning a string to placeholder property in the ts file section. but it could only choose that particular value. i wanted it to choose with an *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';

I'm expecting a result where if father is selected in the select drop-down, the placeholder in the input text-box should be Father's full name.

Thanks in advance !

回答1:

hi, i guess this is what you asking for:

in your 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>

now in your ts file

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

来源：https://stackoverflow.com/questions/56143850/how-to-dynamically-change-the-value-of-placeholder-upon-the-selected-values-in-t

标签

angular

select

placeholder