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

【问题标题】：Updating [placeholder] Reactive Form Control Programmatically以编程方式更新 [占位符] 反应式表单控件
【发布时间】：2018-08-13 12:35:09
【问题描述】：

我的响应式表单中有以下 formControl：

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

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

类似：this.formGroup.get('email').placeholder = 'Some value';

【问题讨论】：

标签： angular typescript angular-reactive-forms

【解决方案1】：

placeholder 是 HTML 元素本身的属性，而不是 formGroup。您可以像使用组件属性 ([placeholder]="someValue") 一样直接绑定它，Angular 的更改检测会自动更新它..

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

<input #myInput />

// ...

@ViewChild('myInput') myInput: ElementRef;

// ...

myInput.nativeElement.placeholder = 'New Thing';

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

【讨论】：

【解决方案2】：

您可以在 [placeholder] 中使用三元运算符。例如[placeholder]="1==1?'true': 'false'"

【讨论】：

【解决方案3】：

你可以在你的组件中创建一个函数，比如

getPlaceholder(key: string): string

此函数将根据您传递的名称生成您想要的占位符

稍后在你的模板中你可以调用这个函数

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

其他解决方案可以扩展 FormControl 类。

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

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

并将您的自定义 formControl 推送到 FormGroup 。通过这种方法，您将能够致电from.controls['email'].placeholder

【讨论】：

我读到，绑定到组件属性而不是调用函数通常更有效。由于 Angular 的变更检测，这个函数会持续执行吗？
没错，angular会多次调用这个函数（每次移动鼠标）
确实如此。 Angular 将始终运行更改检测，但它通过比较值来工作。当它比较一个函数的值时，它需要运行该函数以获得返回值。只是一个属性的值检查起来效率更高。