Angular 2基于掩码验证输入

Question

我正在我的Angular 2项目中使用这个插件来掩盖一些输入内容。

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

每当我尝试检查值时，它总是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_) ___-____ ，它仍然将该字段视为有效。

我尝试使用自定义验证器来检查输入长度，但由于它被预先填充了_，所以也会通过验证。

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

我不知道如何为这种类型的情况创建验证，涉及更复杂的验证。

- celsomtrindade

---

你需要编写一个“自定义验证”代码来去除掩码字符并返回“true”或“false”。 - Aravind

以下代码应如预期工作：Validators.pattern(/^\([1-9]\d{2}\)\s\d{3}-\d{4}$/); 测试链接。 - developer033

Answer 1

仅仅是确认了@developer033的正确答案。对我来说，它非常好用。

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

尽管我使用了适合我的需求的模式。

- Paulo Pedroso