我想动态更改输入框的占位符文本。 控制台已经给出了更新后的字符串,但界面没有更新,因此旧的占位符仍然存在。 如何让界面识别更改?
document.getElementById(this.implicKey).setAttribute('placeholder', options[i].implication);
console.log(document.getElementById(this.implicKey).getAttribute('placeholder'));
我想动态更改输入框的占位符文本。 控制台已经给出了更新后的字符串,但界面没有更新,因此旧的占位符仍然存在。 如何让界面识别更改?
document.getElementById(this.implicKey).setAttribute('placeholder', options[i].implication);
console.log(document.getElementById(this.implicKey).getAttribute('placeholder'));
你可以像这样动态地更改你的输入占位符
<md-input-container class="demo-full-width">
<input mdInput [(ngModel)]="firstname" placeholder="{{somePlaceholder}}" name="firstname" required>
<md-error>This field is required</md-error>
</md-input-container>
组件.ts
somePlaceholder : string = "new value";
现在您可以在类的任何位置更改somePlaceholder的值。
<input formControlName="events" type="text" [placeholder]="newPlaceHolder">
newPlaceHolder: string = "original place holder";
然后,更改属性值:
newPlaceHolder= "my new place holder";
另一种选择可能是在HTML中使用方括号和属性绑定:
<input formControlName="events" type="text" [attr.placeholder]="newPlaceHolder">
newPlaceHolder: string = "text binding"
这个对我来说非常好用:
(我用它来显示 mat-autocomplete 表单字段上的动态错误)
在你的 HTML 中:
[placeholder]="isPlaceHolderShowError('myFormControlName')"
在你的TS上:
isPlaceHolderShowError(myFormControlName) {
if (this.form.controls[myFormControlName].invalid && this.form.controls[myFormControlName].touched) {
return 'this is my error text'
}
return 'this is the initial placehloder'
}