更新NgModel时，Angular ngModelChange较晚

问题描述

我正在使用angular 8进行指令以进行一些处理并将文本转换为大写.下面的简化代码:

I'm making a directive using angular 8 to do some processing and convert the text to uppercase. Simplified code below:

html:

<input class="form-control" id="label" name="label" required myDirective>

指令:

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

@Directive({
  selector: '[myDirective]'
})
export class Mydirective {
  constructor(private control: NgControl) { }

  processInput(value: any) {
     // do some formatting
     return value.toUpperCase();
  }

  @HostListener('ngModelChange', ['$event'])
  ngModelChange(value: any) {
     this.control.valueAccessor.writeValue(this.processInput(value));
  }
}

现在，视图已正确更新，但是模型延迟了一步.例如:如果输入文字显示"AAAA"，则 ng-reflect-model 将显示"AAAa".

Right now, the view is updated correctly, however the model is late by one step. for example:if input text shows 'AAAA' then ng-reflect-model will show 'AAAa'.

我已经在stackblitz中复制了错误:在Stackblitz中复制了错误

I have reproduced the error in stackblitz: Error Reproduced in Stackblitz

知道我哪里错了吗?

谢谢！

推荐答案

您可以使用

  @HostListener('input', ['$event'])
  ngModelChange(event: any) {
    const item = event.target
    const value = item.value;
    const pos = item.selectionStart;
    this.control.control.setValue(this.processInput(value), { emit: false });
    item.selectionStart = item.selectionEnd = pos
  }

看到我们使用@HostListener输入来获取项目，而不仅仅是值.这使我们可以在更改值后将光标定位在其位置

See that we use @HostListener input, to get the item, not only the value. This allow us position the cursor in his position after change the value

注意:要制作一个简单的大写字母，最好使用css text-transform:uppercase，并且，当我们想获取值时，请使用toUpperCase()

NOTE: To make a simple uppercase it's better use css text-transform:uppercase and, when we want to get the value use toUpperCase()

注意2:关于遮罩，请参见此 SO

NOTE2: about mask see this SO

这篇关于更新NgModel时，Angular ngModelChange较晚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！