如何根据下拉列表中的选定值动态更改占位符的值? [英] 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
我尝试使用为ts文件部分中的占位符属性分配字符串.但它只能选择该特定值.我希望它选择一个* ngIf
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.
提前谢谢!
推荐答案
我想这就是你要的:
i guess this is what you asking for:
在您的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;
}
这篇关于如何根据下拉列表中的选定值动态更改占位符的值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!