在Angular2中,ngModel值不会更新onBlur自定义指令事件

时间:2016-12-20 09:39:03

标签: javascript html angular angular2-directives

我开发了一个自定义指令,用于修剪输入控件的值。 请找到相同的代码:

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());    
 }
}

问题是ngModel没有更新onBlur事件的值。 我试图修改onModelChange事件的值,但它不允许两个单词之间的空格(例如,ABC XYZ)

任何建议都会有所帮助。

1 个答案:

答案 0 :(得分:4)

请在onblur事件中添加以下代码行,而不是现有代码。它可以工作:

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

谢谢!