javascript - 输入控件值未从 ngModelChange 正确更新

Question

我在用户键入时更新输入时遇到问题。

我需要从用户那里得到一个如下所示的代码:354e-fab4(2 个字母数字组，每组 4 个字符，用“-”分隔)。用户不应键入“-”，它会自动插入。当用户键入与用于验证的正则表达式不匹配的内容时，我想恢复到以前的有效值。

问题是当验证失败时，输入中的值没有正确更新。另一方面，如果我设置一个硬编码字符串，该值会反射(reflect)在输入中。

我在 stackblitz 中隔离了问题:https://stackblitz.com/edit/angular-qsbtiz

您可以通过输入超过 8 个字符来重现该问题:正则表达式测试失败，代码设置为以前的值，但该值未反射(reflect)在 HTML 输入中。

这是当输入值改变时调用的方法:

onCodeChange(newValue: string) {
    const previousValue = this.code;
    this.code = newValue;
    const regex = new RegExp(/^([a-z0-9]{0,4})?(-)?([a-z0-9]{0,4})?(-)?$/);

    // If the code doesn't match the regex, revert to the old value and return.
    if (!regex.test(newValue)) {

        // This changes this.code, but it's not reflected in the input's value.
        this.code = previousValue;

        // This changes this.code and it is reflected in the input's value.
        //this.code = '1234';
    } else {
        const groups = regex.exec(newValue);
        if (!groups[2] && groups[3]) {
            this.code = `${groups[1]}-${groups[3]}`;
        }
    } 
}

请注意，我感兴趣的是这段代码有什么问题，而不是使用自定义屏蔽输入组件等替代解决方案。

谢谢。

Answer 1

自从您拆分[(ngModel)]。我建议通过将元素自身传递给 onCodeChange() 函数来设置它: Stackbliz example

在模板中:

<input #input type="text" placeholder="" (ngModelChange)="onCodeChange($event,input)" [ngModel]="code"/>

在你的 TS 文件中:

  code = '';
  previousValue = ''

  onCodeChange(newValue: string, input) {
    this.code = newValue;
    const regex = new RegExp(/^([a-z0-9]{0,4})?(-)?([a-z0-9]{0,4})?(-)?$/);

    if (!regex.test(newValue)) {
      console.log("No match. Reverting the code to the previous value (this is not working as expected).");
      input.value = this.previousValue;
    } else {
      const groups = regex.exec(newValue);
      if (!groups[2] && groups[3]) {
        this.code = `${groups[1]}-${groups[3]}`;
      }
      //Save previousValue here instead
      this.previousValue = this.code
    } 
  }