In Angular2, an ngModel value that is not updated on the onBlur event of the user directive

Question

I developed a custom directive that aligns the value of input controls. Please find the code for this:

import { Directive, HostListener, Provider } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
 selector: '[ngModel][trim]',
 providers: [NgModel],
 host: {
  '(ngModelChange)': 'onInputChange($event)',
  '(blur)': 'onBlur($event)'
}
})

export class TrimValueAccessor {
 onChange = (_) => { };
 private el: any;
 private newValue: any;

constructor(private model: NgModel) {
  this.el = model;
}

onInputChange(event) {
  this.newValue = event;
  console.log(this.newValue);
}

 onBlur(event) {
   this.model.valueAccessor.writeValue(this.newValue.trim());    
 }
}

The problem is that ngModel does not update the value on the onBlur event. I tried trimming the value on the onModelChange event, but does not allow a space between two words (e.g. ABC XYZ)

Any suggestion would be helpful.

Answer 1

Please add below line of code in onblur event instead of existing code. It will work:

this.model.control.setValue(this.newValue.trim());

Thank!