Angular中使用掩码mask="+1 000 000-0000"时表单字段无法重置

我之前碰到过一模一样的问题，这大概率是因为输入掩码指令和Angular表单的重置逻辑没有完全同步导致的。让我给你拆解下原因和解决办法：

当你给输入框加上mask="+1 000 000-0000"属性后，掩码指令会实时对输入值做格式化处理，但表单默认的reset()方法只会重置表单控件的原始绑定值，却没有触发掩码指令的内部状态更新——这就导致输入框表面还残留着格式化后的旧值，看起来像是没重置成功。

这里有几个按优先级排序的处理方式，你可以根据自己的项目情况选择：

1. 自定义表单重置方法，手动同步掩码状态 #

在组件类里写一个自定义重置方法，不仅调用表单的reset()，还要手动清空绑定变量并触发掩码更新：

// 组件类代码示例
import { Component, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  mobile: string = '';
  yourForm: FormGroup;

  // 获取输入框的模板引用
  @ViewChild('mobileInput') mobileInput!: ElementRef<HTMLInputElement>;

  constructor(private fb: FormBuilder) {
    this.yourForm = this.fb.group({
      mobile: ['']
    });
  }

  // 自定义重置方法
  resetForm() {
    // 先重置表单控件
    this.yourForm.reset();
    // 清空双向绑定的变量
    this.mobile = '';
    // 手动触发input事件，强制掩码指令更新状态
    this.mobileInput.nativeElement.dispatchEvent(new Event('input'));
  }
}

然后给模板里的输入框加上模板引用变量：

<input #mobileInput class="form-control" [(ngModel)]="mobile" formControlName="mobile" type="tel" placeholder="Please enter a valid mobile number" (keyup)="showDefaultRelationMobileerror($event)" [dropSpecialCharacters]="false" mask="+1 000 000-0000">

2. 监听表单控件值变化，自动同步空值 #

如果不想写自定义重置方法，可以监听表单控件的value变化，当值为空时手动清空绑定变量：

ngOnInit() {
  this.yourForm.get('mobile')?.valueChanges.subscribe(value => {
    if (!value) {
      this.mobile = '';
    }
  });
}

3. 尝试掩码库的内置配置参数 #

有些输入掩码库提供了clearIfNotMatch这类参数，添加后可以确保当值不符合掩码格式（比如重置后的空值）时自动清空输入框：

<input class="form-control" [(ngModel)]="mobile" formControlName="mobile" type="tel" placeholder="Please enter a valid mobile number" (keyup)="showDefaultRelationMobileerror($event)" [dropSpecialCharacters]="false" mask="+1 000 000-0000" [clearIfNotMatch]="true">

把原来的重置逻辑替换成自定义的resetForm()方法（或者按第二种/第三种方式配置），提交表单后执行重置，就能看到输入框被正确清空了。

内容的提问来源于stack exchange，提问作者Lavkush Gupta