以编程方式更新[占位符]反应性表单控件

Question

我的“ formControl回应式表单”中包含以下内容：

<input class="input" formControlName="email" [placeholder]="">

我想知道是否有办法以编程方式设置占位符？

就像是： this.formGroup.get('email').placeholder = 'Some value';

Answer 1

该placeholder是HTML元素本身的特性，而不是formGroup。您可以像使用组件属性（[placeholder]="someValue"）一样直接绑定它，并且Angular的更改检测将自动更新它。

您也可以通过获取元素本身，@ViewChild并将其更新为元素的属性（即vanilla JS）：

<input #myInput />

// ...

@ViewChild('myInput') myInput: ElementRef;

// ...

myInput.nativeElement.placeholder = 'New Thing';

如果您对这些占位符有某种标准化的行为，则可以将其外推到Directive以更简洁的方式完成此行为的。