Refre sh вход после не в фокусе

Question

У меня есть вход для идентификатора, который должен быть набран пользователем. Он должен иметь фиксированную длину 7. Пользователь может ввести идентификатор, например «1234», и я добавлю нулевой префикс, чтобы получить необходимую длину. Моя проблема в том, что после того, как пользователь вводит «1234» и выходит из фокуса, он не отображается «0001234», он остается «1234».

переменная компонента

 let contact = {
      email: 'email@emai.com,
      id: Utils.addZeroPrefix(this.id.value, 7),
      name: 'name',
}

  idChanged() {
    this.idNotFound = false;
  }

Метод утилит

  public static addZeroPrefix(root, fixedLength) {
    while (root.length < fixedLength) {
      root = '0' + root;
    }
    return root;
  }

Html

  <input formControlName="id" type="text" class="form-control" placeholder="id" aria-label="id" aria-describedby="id" (keyup)="idChanged()">

Answer 1

На (blur) вы можете добавить дополнительные нули, используя patchValue

Попробуйте так:

.ts

onBlur() {
   let id = this.contactForm.get("id");
   id.patchValue(this.addZeroPrefix(id.value, 7));
}

. html

<input type = "text"  formControlName="id" (blur)="onBlur()" >

Рабочая демоверсия