"Trim" directive for angular 2 and reflect changes to ngModel
to avoid confusion changing model attribute name.
<input name="fruit" [(ngModel)]="fruit1" (change)="fruit1=fruit1.trim()"/>
Have you looked at https://github.com/anein/angular2-trim-directive ?
Seems like it would address your use case
CommonController in example is just base class that triggers subject in onDestroy hook to unsubsribe from observable.
@Directive({
selector: '[appTrimOnBlur]'
})
export class TrimOnBlurDirective extends CommonController implements OnInit {
constructor(private elementRef: ElementRef,
@Self() private ngControl: NgControl) {
super();
}
ngOnInit(): void {
fromEvent(this.elementRef.nativeElement, 'blur').pipe(
takeUntil(this.unsubscribeOnDestroy)
).subscribe(() => {
const currentValue: string = this.ngControl.value.toString();
const whitespace: string = ' ';
if (currentValue.startsWith(whitespace) || currentValue.endsWith(whitespace)) {
this.ngControl.control.patchValue(currentValue.trim());
}
});
}
}
You can create generic trim directive, that will make trim not only for blur event,but for any, that you will provide:
@Input() public trimEventName: string = 'blur';
constructor(private elementRef: ElementRef,
@Self() private ngControl: NgControl) {
super();
}
ngOnInit(): void {
fromEvent(this.elementRef.nativeElement, this.trimEventName).pipe(
takeUntil(this.unsubscribeOnDestroy)
).subscribe(() => {
const currentValue: string = this.ngControl.value.toString();
const whitespace: string = ' ';
if (currentValue.startsWith(whitespace) || currentValue.endsWith(whitespace)) {
this.ngControl.control.patchValue(currentValue.trim());
}
});
}