6

I'm trying to use md-error in angular material to validate user inputs from client side.

So in my case I'm trying to validate an input field that accept two types of patterns.

  1. Regular Expression 1 : Accept first 9 characters as numbers then 10th
    character as x or X or v or V

  2. Regular Expression 2 : Accept 12 characters as numbers

So I implemented that in my typescript file like following

samplefile.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)
    ]);    
}

this is the HTML content for the above field

<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>

for a single regular expression(single pattern) this is working fine, but since I need to validate two patterns I tried following approaches in typescript file

Approach 1:

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

Approach 2:

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

But none of above working properly, is it possible to validate multiple patterns using md-error ? please comment

3 Answers 3

6

What you were trying was combination of pattern(AND condition) should satisfy together then only the field will be valid. But actually you need either of RegEx to be satisfied, so that's why consider creating a custom validator which would manually testing both the RegEx with OR operator.

Code

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

See Also Custom Validators in Angular

3
  • okay I'll go with that, really appreciate, thanks for the help
    – Kelum
    Commented Sep 7, 2017 at 16:25
  • 1
    for this custom error how to show custom error message ?
    – Kelum
    Commented Sep 26, 2017 at 16:40
  • 1
    Thanks Pankaj, instead of test() method, I used match() in Angular 7. if(control.value.match(mob_Regex) || control.value.match(email_Regex)) { return null; } else { return {checkValidAddress : true} ; } Commented Nov 30, 2018 at 1:44
0

Write your two regex expression in single string using | and then use a single Validators.pattern ("your expression").

Here it can be Validators.pattern("/[0-9]{9}[x|X|v|V]$/|/[0-9]{12}$/"). Note here I have used an or between two regex.

0

In Angular 7 or above, you can do the following:

validateInput(c: FormControl){ //Dual Pattern Check 
    let oldPattern = '^[A-Z]{2}[0-9]{2}[A-HJ-NP-Z]{1,2}[0-9]{4}$'; // Regular Expression 1 
    let newPattern = '^[0-9]{2}BH[0-9]{4}[A-HJ-NP-Z]{1,2}$'; // Regular Expression 2 
    return (c.value.match(oldPattern) || c.value.match(newPattern)? null :{checkValidAddress : true}); }

//usage like this 
registrationNumber: new FormControl('',[Validators.required,this.validateInput])

Not the answer you're looking for? Browse other questions tagged or ask your own question.