2

I'm using individual control validators in the forms of an Angular app and they work perfectly. Now, I wanted to add a validator for checking that the value of a control is less than other control's, and I read that I must apply the validator to the parent of the control (the FormGroup itself).

So, I did some tests that you can see in the following stackblitz:

https://stackblitz.com/edit/angular-mts2gq

I'm sure that I have something wrong with the sourcePortsValidator and destPortsValidator, because they don't work as expected. For example, have a look at this screenshot:

enter image description here

And the console:

enter image description here

It says that start is 20, end is 120 and the comparison start>end is true. A little weird, isn't it? What would it be the right way of defining these validators?

Thanks in advance,

HDJEMAI
  • 9,436
  • 46
  • 67
  • 93
Fel
  • 4,428
  • 9
  • 43
  • 94

1 Answers1

1

Short answer:

In your HTML, change the type of the source port start and source port end input boxes to number.

Long answer:

Inputs of text type return their value as string so start > end actually compares the port numbers as string (lexicographically). See Why is one string greater than the other when comparing strings in JavaScript?.

Kelvin Lai
  • 2,209
  • 7
  • 24
  • 26