更改掩码格式时无法清除模板驱动形式的元素值

Question

我有一个文本框，我需要根据用户输入更改掩码格式并清除文本框。如果我更改掩码格式，文本框不会被清除，如果我删除掩码格式的条件，文本框会被清除

html

<input type="text" mask="{{maskFormat}}" [(ngModel)]="empId" />

<button (click)="toggleMask()">Change Mask</button>

TS

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  maskFormat: string = '000';
  empId: string;

  toggleMask(): void {

    if (this.maskFormat.length == 3) {
      this.maskFormat = "000000";
    }
    else {
      this.maskFormat = "000";
    }


    this.empId = "";

  }

}

注意：我正在使用 ngx-mask 包

stackblitz

Answer 1

我认为这是由于 ngx-mask 模块对值进行了一些重新计算，然后在 this.empId = ""; 为运行之后设置了模型值。

通过添加带有零计时器的 setTimeout 函数，您将强制 Angular 在设置值之前等待一个生命周期，从而让 ngx-mask 代码运行在你的代码之前。

setTimeout(() => { this.empId = null }, 0);

这不是一个优雅的解决方案，但无需查看 ngx-mask 模块，它可以解决您的问题。

Here's a working StackBlitz example.

更改掩码格式时无法清除模板驱动形式的元素值

Unable to clear value of element in template driven form when mask format is changed

typescript

input-mask

angular

angular8

ngx-mask