通过 ngModel Binding 设置值时如何在 textarea 上触发更改事件

Question

我在 Angular 7 项目的模板驱动形式中有一个 <textarea>。编辑对象时，表单会预先填充当前值。我想通过修改元素样式通过 [(ngModel)]="property" 绑定更改内容时自动调整 <textarea> 的大小。

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

代码通常可以正常工作，但我找不到合适的事件来触发它。订阅 <textarea> 的 change 事件仅适用于键盘输入。使用 (ngModelChange)="adjustTextAreaSize($event)" 具有相同的行为。

我试图在 ngOnInit() 函数的末尾执行调整大小的代码，但此时实际的 html-control 似乎还没有任何内容。

有谁知道哪个事件可以解决这个问题？一开始似乎是一项相当容易的任务，但我现在已经花了一个多小时来解决这个问题......不可能是一项如此困难的任务，对吗？

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

trigger a change event on a textarea when setting the value via ngModel Binding

这样做会导致无限触发

如果您不想以更被动的方式监控输入模型的变化，一个更快的解决方案（但有点老套）就是将您的代码简单地包装在 setTimeout in ngOnInit() 中或 ngAfterViewInit() 你提到它不起作用的地方。

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

通过 ngModel Binding 设置值时如何在 textarea 上触发更改事件

How to trigger a change event on a textarea when setting the value via ngModel Binding

html

binding

textarea

angular