If you want the output like the image below :
You can use the dynamic custom component below :
import { Component, Input, OnInit, EventEmitter, Output, OnChanges } from '@angular/core';
import { RegExpValidator } from '../../classes/reg-exp-validator';
@Component({
selector: 'app-reg-exp-validator',
template: `
<div *ngFor="let regExp of regExps" style='text-align: left'>
<div>
<i *ngIf="!regExp.isOptional" [ngStyle]="{'color': isValidExp(regExp) ? 'green' : 'red'}"
[className]="isValidExp(regExp)? 'pi pi-check-circle' : 'pi pi-times-circle'">
</i>
<i *ngIf="regExp.isOptional" [ngStyle]="{'color': isValidExp(regExp) ? 'green' : 'orange'}"
[className]="isValidExp(regExp)? 'pi pi-check-circle' : 'pi pi-times-circle'">
</i>
{{regExp.message}}
</div>
</div> `
})
export class RegExpValidatorComponent implements OnInit, OnChanges {
@Input() value: string;
@Input() regExps: Array<RegExpValidator>;
@Output() onChange: EventEmitter<boolean> = new EventEmitter();
constructor() { }
ngOnChanges(): void {
this.validateExpressions();
}
ngOnInit() {
}
isValidExp(regExp) {
if (regExp.isValid)
return regExp.isValid;
}
initiValue() {
this.value = this.value == undefined ? "" : this.value;
}
validateExpressions() {
this.initiValue();
let isInVlaidExpression = false;
this.regExps.forEach((regExp) => {
regExp.isValid = this.testRegExpression(regExp.regExpression);
if (!regExp.isValid && !regExp.isOptional) {
isInVlaidExpression = true;
}
});
this.onChange.emit(isInVlaidExpression);
}
testRegExpression(regExpression: RegExp) {
return regExpression.test(this.value);
}
}
where
regExps
input array class is
export class RegExpValidator {
regExpression: RegExp;
message: string;
ordinal: number;
isValid: boolean = false;
isOptional: boolean; }
After you define it, you can use it in your target component by following the two steps below :
1- Define the first input parameters which is array of regular expressions itself , validation message and if it is optional or not as below :
DefineRegExpressions(){
let minPasswordLengthSixCharacters = new RegExpValidator();
minPasswordLengthSixCharacters.message = " The password should be at least 6 charcters";
minPasswordLengthSixCharacters.regExpression = /^.{6,}$/;
minPasswordLengthSixCharacters.isOptional = false;
let containsDigit = new RegExpValidator();
containsDigit.message = "The password should contains at least 1 digit";
containsDigit.regExpression = /\d/;
containsDigit.isOptional = false;
let containsLowerCharacter = new RegExpValidator();
containsLowerCharacter.message = "The password should contains at least 1 lower charcter";
containsLowerCharacter.regExpression = /.*[a-z].*/;
containsLowerCharacter.isOptional = false;
let containsUpperCharacter = new RegExpValidator();
containsUpperCharacter.message = "The password should contains at least 1 upper charcter";
containsUpperCharacter.regExpression = /.*[A-Z].*/;
containsUpperCharacter.isOptional = false;
let containsSymbol = new RegExpValidator();
containsSymbol.message = "The password contains at least 1 symbol @!#%&()^~{}";
containsSymbol.regExpression = /[*@!#%&()^~{}]+/;
containsSymbol.isOptional = true; }
then define the first input and add all the defined expressions declaration above to it:
regExps = Array<RegExpValidator>();
this.regExps.push(minPasswordLengthSixCharacters);
this.regExps.push(containsDigit);
this.regExps.push(containsLowerCharacter);
this.regExps.push(containsUpperCharacter);
this.regExps.push(optional);
2- Finally add to your target component HTML the below code :
<app-reg-exp-validator [value]="password"
[regExps]="regExps"
(onChange)="onChangeRegExpValidator($event)">
</app-reg-exp-validator>
the value input refer to the target input to validate in our case it is the password and
the onChange is output from custom componet that you can use to know if all validation
is valid or not.