angularjs - 允许在 Angular Material 2 中接受多个验证器模式

Question

我正在尝试使用 md-error 在 Angular Material 中验证来自客户端的用户输入。

所以在我的例子中，我尝试验证接受两种模式的输入字段。

1. 正则表达式 1:接受前 9 个字符作为数字，然后接受第 10 个
   字符为 x 或 X 或 v 或 V

2. 正则表达式 2:接受 12 个字符作为数字

所以我在我的 typescript 文件中实现了它，如下所示

示例文件.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

const NIC_REGEX_OLD = /[0-9]{9}[x|X|v|V]$/; // Regular Expression 1
const NIC_REGEX_NEW = /[0-9]{12}$/;         // Regular Expression 2

@Component({
    selector: 'sample-form',
    templateUrl: `sample.html`,
    styleUrls: ['sample.css']
})
export class SampleComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {

    }       

    sampleFormControl = new FormControl('', [
        Validators.pattern(NIC_REGEX_OLD)
    ]);    
}

这是上述字段的 HTML 内容

<div class="sample">
    <md-form-field>
        <input mdInput required [formControl]="sampleFormControl" maxlength="12">
        <md-error *ngIf="sampleFormControl.hasError('pattern')">
            Please enter the valid sample input
        </md-error>
    </md-form-field>
</div>

对于单个正则表达式(单个模式)，这工作正常，但由于我需要验证两种模式，我尝试了 typescript 文件中的以下方法

方法一:

    sampleFormControl = new FormControl('', [
        Validators.pattern(NIC_REGEX_OLD || NIC_REGEX_NEW)
    ]); 

方法 2:

    sampleFormControl = new FormControl('', [
        Validators.pattern(NIC_REGEX_OLD),
        Validators.pattern(NIC_REGEX_NEW)
    ]);

但以上都不能正常工作，是否可以使用 md-error 验证多个模式？请评论

Answer 1

您尝试的是 pattern(AND condition) 的组合应该同时满足，然后只有该字段才有效。但实际上你需要满足 RegEx 中的任何一个，所以这就是为什么要考虑创建一个自定义 validator ，它将使用 OR 运算符手动测试这两个 RegEx .

代码

function validateInput(c: FormControl) {
  let NIC_REGEX_OLD = /[0-9]{9}[x|X|v|V]$/; // Regular Expression 1
  let NIC_REGEX_NEW = /[0-9]{12}$/;         // Regular Expression 2

  return (NIC_REGEX_OLD.test(c.value) || NIC_REGEX_NEW.test(c.value)) ? null : {
    validateInput: {
      valid: false
    }
  };
}

//Usage
sampleFormControl = new FormControl('', [
    validateInput
]);

另请参阅 Custom Validators in Angular