允许在角度材料 2 中接受多个验证器模式

Question

我正在尝试在角度材料中使用md-error来验证来自客户端的用户输入。

所以在我的例子中，我试图验证一个接受两种类型模式的输入字段。

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

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

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

样本文件.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>

对于单个正则表达式（单个模式），这工作正常，但是由于我需要验证两种模式，因此我尝试遵循打字稿文件中的方法

方法一：

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

方法二：

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

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

Answer 1

您尝试的是模式（AND条件）的组合应该一起满足，然后只有该字段有效。但实际上您需要RegEx满足其中一个，所以这就是为什么考虑创建一个自定义validator来手动测试 RegEx 和OR运算符。

代码

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
]);

另请参阅Angular 中的自定义验证器