Set formNameGroup value inside directive

Question

I'm using reactive forms. Inside my directive I have access to the element thanks to `ElementRef.

However when I try to set the value of my textarea element using this.element.nativeElement.value = 'new text' the value doesn't get updated and the formGroupName doesn't trigger any changeValues.

How can I properly set the value of a textarea element that uses formGroupName?

Answer 1

You still need to dispatch the event when changing the value this way. It doesn't automatically get dispatched. This is how the directive knows that value has changed; by listening for the input event.

this.element.nativeElement.value = 'new text'
this.element.nativeElement.dispatchEvent(new Event('input'));