Angular 9 trim directive - directive

Question

I have a directive that should trim a value in a input box. The directive trim the value in the form but when I submit it, the value is not trimed.
// this code works and the value is trimmed after submitting the form
<input type="text" matInput formControlName="adress" oninput="this.value = this.value.trim()">
// this code trim the value on the form but NOT after submitting the form
<input type="text" matInput formControlName="adress" trimvalue>
I am missing something in the directive ?
Directive:
import { Directive, ElementRef, HostListener, Renderer2 } from '#angular/core';
#Directive({
selector: '[trimvalue]'
})
export class TrimDirective {
constructor(
private renderer: Renderer2,
private elementRef: ElementRef
) { }
#HostListener('input') onInput(event) {
let value = this.elementRef.nativeElement.value;
if (value) {
value = value.trim();
this.elementRef.nativeElement.value = value.trim();
this.renderer.setValue(this.elementRef.nativeElement, this.elementRef.nativeElement.value);
}
}
}

Answer 1

angular source code - setValue()
you can see setValue is woking by node.textContent = value;
setValue(node: RText, value: string): void {
node.textContent = value;
}
and textContent is string|null
export interface RText extends RNode {
textContent: string|null;
}
So, I guess setValue() didn't work as predicted is cause by typescript's type go something wrong in background...
You can trim it by nodeValue.
this.elementRef.nativeElement.childNodes.forEach((x: ChildNode, i: number) => {
if (x.nodeName === '#text') {
this.elementRef.nativeElement.childNodes[i].nodeValue = this.elementRef.nativeElement.childNodes[i].nodeValue.trim();
}
});
}