在 Angular2 ngModel 值未在自定义指令的 onBlur 事件上更新

Posted 2023-02-22

【中文标题】在 Angular2 ngModel 值未在自定义指令的 onBlur 事件上更新

【英文标题】：In Angular2 ngModel value not updating on onBlur event of custom directive

【发布时间】：2017-05-05 11:28:46

【问题描述】：

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

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）

任何建议都会有所帮助。

【问题讨论】：

你能想出一个 plunker，因为有人必须测试它吗？

【参考方案1】：

请在 onblur 事件中添加以下代码行而不是现有代码。它将起作用：

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

谢谢！