Question

我有一个输入，必须由用户输入一个ID。固定长度应为7。用户可以输入“ 1234”之类的ID，我将添加零前缀以获取所需的合法性。我的问题是，在用户键入“ 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()" >

Working Demo

失去焦点后刷新输入

1 个答案: