Angular 以编程方式更新[placeholder]被动表单控件

我将以下

formControl

作为我的反应式表单的一部分：

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

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

---

类似于：

this.formGroup.get（'email'）。占位符='Some value'

占位符

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

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


// ...
@ViewChild（'myInput'）myInput:ElementRef；
// ...
myInput.nativeElement.placeholder='新事物'；

如果您对这些占位符有某种规范化的行为，您甚至可以将其外推到一个
指令中，该指令以更干净的方式完成此行为。
yo可以在组件中创建一个函数，如

getPlaceholder(key: string): string

此函数将根据传递的名称生成所需的占位符

稍后在模板中可以调用此函数

<input class="input" formControlName="email" [placeholder]="getPlaceholder('email')">

并将自定义formControl推送到FormGroup。
使用这种方法，您将能够从.controls['email']调用
。占位符
您可以在[placeholder]中使用三元运算符。e、 g
[placeholder]=“1==1？”“true”：“false”
我读到绑定到组件属性通常比调用函数更有效。由于Angular的变化检测，这个函数会持续执行吗？是的，Angular会调用这个函数乘以时间（每次移动鼠标），这是真的。Angular将始终运行更改检测，但它通过比较值来工作。当它比较函数的值时，需要运行该函数以获取返回值。仅作为属性的值更易于检查。
<input class="input" formControlName="email" [placeholder]="getPlaceholder('email')">

export class MyCustomFormControl extends FormControl {
  _placeholder: string 
  constructor(...config) {
    super(config)
  }

  set placeholder(key:string){
    this._placeholder = key
  } 
  get placeholder() {
   return this._placeholder
  }
}