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

Вместо input Вы можете связать с ngModelChange это будет вызвано обоими событиями:

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

См. Демонстрацию: https://stackblitz.com/edit/angular-basic-template-say51l?file=src%2Fapp%2Fautosize.directive.ts

Answer 2

После быстрого взгляда вы неправильно указали размер автозапуска, в вашем случае это авторазмер:

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