Angular 2 基于掩码验证输入答案

【问题标题】：Angular 2 validate input based on maskAngular 2 基于掩码验证输入
【发布时间】：2017-12-05 11:27:10
【问题描述】：

我在我的 Angular 2 项目中使用 this plugin 来屏蔽一些输入。

我遇到的问题是验证输入是否应用了正确的掩码。

每当我尝试检查该值时，它总是valid。例如，我有一个掩码来填写电话号码，就像在示例中一样：

@Component({
  template: `
    <input [textMask]="{mask: mask}" type="tel" formControlName="phone" />
  `
})

export class AppComponent {
  public myModel = ''
  public mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
}

但即使我填写了两个数字(11_) ___-____，它也会将该字段视为valid。

我试图设置一个自定义验证器来检查输入长度，但它也通过了，因为它被预填充了_。

this.registerForm = this._fb.group({
    'phone': [null, Validators.compose([
        Validators.required,
        Validators.minLength(14),
        Validators.maxLength(14)
    ])],
});

我不知道如何为这种类型的场景创建验证，包括更复杂的验证。

【问题讨论】：

您需要编写custom validation 代码来去除屏蔽字符并返回true 或false
以下应该按预期工作：Validators.pattern(/^$[1-9]\d{2}$\s\d{3}-\d{4}$/);Test。

标签： angular validation angular-forms

【解决方案1】：

只需从@developer033 注册正确答案。它对我来说就像一种魅力。

以下内容应按预期工作： Validators.pattern(/^([1-9]\d{2})\s\d{3}-\d{4}$/);

虽然我使用了适合我需要的模式。

【讨论】：