Невозможно очистить значение элемента в управляемой шаблоном форме при изменении формата маски - PullRequest
Новая
       39

Невозможно очистить значение элемента в управляемой шаблоном форме при изменении формата маски

0 голосов
/ 23 сентября 2019

У меня есть текстовое поле, где мне нужно изменить формат маски на основе ввода пользователя и очистить текстовое поле.Если я изменяю формат маски, текстовое поле не очищается, а если я удаляю условие формата маски, текстовое поле очищается 

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 пакет

стек

1 Ответ

0 голосов
/ 25 сентября 2019

Я думаю, это связано с тем, что модуль ngx-mask выполняет некоторый пересчет значения и затем устанавливает значение модели после запуска this.empId = "";.

Добавляя функцию setTimeout с таймером обнуления, вы заставите Angular ждать один жизненный цикл, прежде чем он установит значение, позволяя коду ngx-mask выполняться перед вашим кодом.

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

Это не элегантное решение, ноне заглядывая в модуль ngx-mask, он решает вашу проблему.

Вот рабочий пример StackBlitz.

...