angular - 如何根据下拉列表中的选定值动态更改占位符的值?
问题描述
我有一个下拉列表,其中包含:父亲、母亲和监护人。后面是一个没有占位符的输入文本框。我希望文本框的占位符根据所选值动态更新
我尝试在 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';
我期待的结果是,如果在选择下拉列表中选择了父亲,则输入文本框中的占位符应该是父亲的全名。
提前致谢 !
解决方案
嗨,我想这是你要求的:
在你的 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;
}
推荐阅读
- python - 为什么 Python 函数会在调用之间“记住”可选参数的值
- hibernate - 如何在使用spring数据和jpa hibernate保存具有一对多关系的实体时避免唯一键违规?
- web-scraping - Splinter- Web Scraping href by find_partial_text
- reactjs - mobx 动作功能不改变存储值
- .htaccess - 如何使用 htaccess 从 URL 中删除特定文件夹名称
- extract - Splunk:如何使用正则表达式直接在搜索命令中提取字段?
- python - 如何将点连接到最近的多边形边界
- javascript - 将 useState 与对象数组反应
- c++ - C++ 和 PowerShell:带有 ANSI 颜色的 std::cout 奇怪间距
- sql - pgsql如何强制某些键的唯一性