Как вызвать событие изменения текстовой области при установке значения с помощью привязки ngModel

Question

У меня есть <textarea> в шаблонной форме проекта Angular 7. При редактировании объекта форма заполняется текущими значениями. Я хочу автоматически изменить размер <textarea>, когда содержимое изменилось с помощью привязки [(ngModel)]="property", изменив стиль элемента.

area.style.overflow = 'hidden';
area.style.height = '0';
area.style.height = area.scrollHeight + 'px';

Код обычно работает, но я не могу найти подходящее событие для вызвать его. Подписка на change событие <textarea> работает только на ввод с клавиатуры. Использование (ngModelChange)="adjustTextAreaSize($event)" ведет себя точно так же.

Я пытался выполнить свой код изменения размера в конце функции ngOnInit(), но фактический html -контроль, похоже, пока не имеет никакого содержимого .

У кого-нибудь есть идея, какое событие могло бы сработать? Поначалу это казалось довольно простой задачей, но я ломаю над ней более часа ... не может быть такой сложной задачей, не так ли?

Answer 1

Да, для этого есть очень простое решение. Оберните ваш textarea внутри form и попробуйте следующий код: -

HTML

<form #form="ngForm">
   <textarea>....</textarea>
</form>

TS

@ViewChild('form') ngForm: NgForm;
ngOnInit() {
  this.subscription = this.ngForm.form.valueChanges.subscribe(resp => 
    {
      console.log(resp); // You get your event here
    }
)
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

Answer 2

инициирует событие изменения текстовой области при установке значения через привязку ngModel

Это приведет к бесконечному запуску, если вы сделаете это.

Если вы этого не сделаете Если вы хотите отслеживать изменения модели ввода более оперативно, более быстрое решение (но немного хакерское) будет просто заключать ваш код в setTimeout в ngOnInit() или ngAfterViewInit() там, где вы упоминали, что он не работает.

setTimeout(() => {
  updateSize();
});