advanced custom validator for template driven form with dynamic input

Question

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:

https://stackblitz.com/edit/angular-4cvomu-zjlht5

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

Vega · Accepted Answer · 2019-04-03 13:45:15Z

2

+100

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.

edited Apr 3, 2019 at 13:45

answered Apr 3, 2019 at 0:44

Vega

28.8k28 gold badges121 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syed mohamed aladeen · Accepted Answer · 2019-04-02 11:21:02Z

1

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

https://stackblitz.com/edit/angular-4cvomu-7jpviu

edited Apr 2, 2019 at 11:21

answered Apr 2, 2019 at 7:47

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

5 Comments

Andre Elrico Over a year ago

could you fork my stackblitz?

Syed mohamed aladeen Over a year ago

forked in stackblitz, try in your local

Andre Elrico Over a year ago

First of all thank you: But I cant get it to work : killerstring: 1ccc should not give an error. But it does...

Syed mohamed aladeen Over a year ago

what are your values for all 3 text boxes?

Andre Elrico Over a year ago

your stackblitz is similar to my second try. However it has the same problems. 1. does not show valid on first change from invalid to valid. (check console for this.), 2. uses a single global variable that will surely give sideeffects when using the directive in multiple places.

Collectives™ on Stack Overflow

advanced custom validator for template driven form with dynamic input

Update 2

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update 2

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related