I'm using md-error in angular material to validate user inputs from the client side.
Currently, I am trying to validate an input field that accepts two types of patterns:
Pattern 1: Accept the first 9 characters as numbers followed by the 10th character being either x, X, v, or V
Pattern 2: Accept 12 characters as numbers only
In my TypeScript file, I have implemented this as follows:
samplefile.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
const PATTERN_ONE = /[0-9]{9}[x|X|v|V]$/;
const PATTERN_TWO = /[0-9]{12}$/;
@Component({
selector: 'sample-form',
templateUrl: `sample.html`,
styleUrls: ['sample.css']
})
export class SampleComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
sampleFormControl = new FormControl('', [
Validators.pattern(PATTERN_ONE)
]);
}
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 a valid sample input
</md-error>
</md-form-field>
</div>
While validating a single pattern works fine, I encountered issues when attempting to validate two patterns simultaneously. I tried different approaches in TypeScript but none worked successfully. Is there a way to validate multiple patterns using md-error? Your insights are appreciated.