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，以更清洁的方式完成此行为。

Answer 2

你可以在你的组件中创建一个功能，如

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

Answer 3

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

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

3 个答案: