FormControl:setValue 不触发输入事件

Question

我有一个表单，其中 notes 字段由文本区域界定。

this.form = this.formBuilder.group({});
this.form.addControl('notes', new FormControl(''));

模板附加了 autoresize 指令。

<textarea formControlName="notes" autosize></textarea>

这样的指令会在用户每次更改其内容时调整文本区域的高度。

@HostListener('input')
public onChange(textArea: HTMLTextAreaElement): void {
    const textarea = this.element.nativeElement.querySelector('textarea');
    this.renderer.setStyle(textarea, 'overflow', 'hidden');
    this.renderer.setStyle(textarea, 'height', 'auto');
    this.renderer.setStyle(textarea, 'height', `${textarea.scrollHeight}px`);
  }

但是，当我以编程方式更改 FormControl 的值时，没有触发 input 事件，文本区域也没有相应地调整大小。

this.form.controls['notes'].setValue('a new value'); // not firing events

我做错了什么？

Answer 1

快速浏览后，您拼错了 autoresize，在您的情况下它是 autosize：

<textarea formControlName="notes" autosize></textarea>

Answer 2

您可以绑定到 ngModelChange 而不是 input，这将在两个事件上触发：

@HostListener('ngModelChange') onNgModelChange() {
  console.log('ngModelChange');
}

查看演示：https://stackblitz.com/edit/angular-basic-template-say51l?file=src%2Fapp%2Fautosize.directive.ts

FormControl:setValue 不触发输入事件

FormControl:setValue don't fire input event

events

angular2-formbuilder

angular