advanced custom validator for template driven form with dynamic input

STACKBLITZ

• killerString needs a number on first position
• string1 + string2 + killerstring need a combined length less than 15 (for e.g)
• I tried to "copy/ adapt" the pattern validator from angular sources.

How can I have a customValidator that a "dynamic data" information attached. There is no "hook" in input where I can attach my "dynamic data"

Do you have any suggestions?

With Syed's help I got close ... its very hacky and Im sure it does not work when you have multiple fields using my customLength validator:

Update 2

I've found a WORKING SOLUTION with help of this and that.

one thing that is still lacking:

• when string1 or string2 are "changed" this does not trigger validation in killerInput...

2 Answers

Based on your updated post, you need to listen for @Input changes in the directive. It can be done with ngChanges and registerOnValidatorChange, which will help you to register the callback function to call when the validator inputs change.

killerInput class can be set with a template variable, ngClass and some style:

HTML:

 <input matInput #myInput=ngModel [ngClass]="{'error-class': myInput.invalid}" ...."> 

Directive

..... private _onChange: () => void; registerOnValidatorChange(fn: () => void): void { this._onChange = fn; } ngOnChanges(changes: SimpleChanges): void { if ('customLength' in changes) { if (this._onChange) this._onChange(); } } 

CSS

.error-class{ border: 2px solid red } 

DEMO

You can check this article.

change the following lines and check

input-error-state-matcher-example.ts

from

const total_name = customLength.arr.join(); if (total_name.length > customLength.maxLength) { 

to

const total_name = customLength.arr?customLength.arr.join(''):''; if (total_name.length < customLength.maxLength) { 

input-error-state-matcher-example.html

from

<input matInput placeholder="killerstring" [(ngModel)]="killerstring" name = "TDkillerstring" #TDkillerstring = "ngModel" required [pattern]="pat1" [customLength]="{arr: [string1, string2], maxLength: 15}"> 

to

<input matInput placeholder="killerstring" [(ngModel)]="killerstring" name = "TDkillerstring" #TDkillerstring = "ngModel" required [pattern]="pat1" [customLength]="{arr: [string1, string2, killerstring], maxLength: 15}"> 

now you will get the error, if the combination of 3 textbox character's length exceeds a length of 15.

I have updated my code in stackblitz. check here