Angular 2 Material Input динамически изменяет местозаполнитель

Question

Я хочу динамически изменять текст входного заполнителя. Console.log уже выдает обновленную строку, но интерфейс не обновляется, поэтому остается старый заполнитель. Как я могу получить интерфейс для распознавания изменений?

document.getElementById(this.implicKey).setAttribute('placeholder', options[i].implication);

console.log(document.getElementById(this.implicKey).getAttribute('placeholder'));

Answer 1

Вы можете динамически изменять свой входной заполнитель, как это

<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>

component.ts

somePlaceholder : string = "new value";

теперь вы можете изменить значение somePlaceholder в любом месте класса.

Answer 2

Мы можем сделать это с помощью привязки свойств.

В HTML используйте квадратные скобки:

<input formControlName="events" type="text" [placeholder]="newPlaceHolder">

В вашем файле машинописи определите свойство:

somePlaceHolder: string = "original place holder";

Затем измените значение свойства:

somePlaceHolder = "my new place holder";

Answer 3

другой вариант может быть в HTML, используйте квадратные скобки с привязкой атрибута :

      <input formControlName="events" type="text" [attr.placeholder]="newPlaceHolder">

В вашем машинописном файле определите свойство:

      newPlaceHolder: string = "text binding" 

Answer 4

Этот отлично работает для меня:

(я использую его, чтобы показать динамическую ошибку в поле формы mat-autocomplete)

в вашем HTML:

 [placeholder]="isPlaceHolderShowError('myFormControlName')"

на вашем ТС:

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'

}