Reactive Form Validity based on IP Addresses RegEx - regex

Question

Update: I find that this behavior is reproducible using a simple regex such as /^[0-9]+$/. It is also reproducible using a custom validator function such as
export function textareaPattern(pattern: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const values = control.value.split('\n');
let mismatch = false;
values.forEach(val => {
mismatch = !pattern.test(val);
if(mismatch) {
return {textareaPattern: {value: control.value}}
}
});
return null;
}
}
Original post: I have a regex that is intended to validate that a user has entered multiple, valid IP addresses- one per line- in a text area.
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(/([0-9]|[1-2][0-9]|3[0-2]))?$\n?/gim
The regex works on a happy path, but gets weird once both a valid entry and an invalid entry are present.
If I enter all valid values, the form control is valid, as expected. Example:
10.1.121.2
10.2.121.3
10.3.121.4
If I enter all invalid values, the form control is not valid, as expected. Example:
butter
potato
123
If I enter a combination of valid and invalid values, the form control alternates between valid and invalid, depending on the length of the entry. If the entry's length is even, it's invalid, and odd is valid. How odd.
length: 12, Invalid
10.1.121.1
f
length: 13, Valid
10.1.121.1
fo
I'd think the problem lies in the RegEx, but I'll admit I'm far from comfortable deciphering such a behemoth of a RegEx.
The RegEx should match:
192.168.1.1
255.203.232.1
1.0.12.1
The RegEx should not match:
256.1.12.1
1934.1.22.3
201.foobar.201.1
Minimal, Reproducible Example (updated with solution): https://stackblitz.com/edit/angular-v4f35a?file=src%2Fapp%2Fapp.component.ts

Answer 1

So this boiled down to two issues.
The first problem was that the global flag for RegExes causes the JS engine to track a lastIndex property from which the next search will start when myRegex.test() is called again. Since the regex object is the same throughout the validation process, that lastIndex is updated and referenced as you type, and the form re-validates.
The second problem is that without global, the form would be considered valid as long as one line is correct. So my input could be
192.168.foobar
192.168.1.1
hello world!
and the form is valid because of line 2.
My Solution
I've implemented a custom validator for textareas. It accepts my regex (sans g flag) and splits the contents of the textarea on \n. It immediately assumes no mismatches, then for each line, checks that the line matches the RegEx. If not, it mismatches and returns an object containing the contents of the textarea:
import {AbstractControl, ValidatorFn} from '#angular/forms';
export function multilinePattern(pattern: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const values = control.value.split('\n');
if (values.length === 1 && values[0] === '') {
return null;
}
let mismatch = false;
values.forEach((val: string) => {
if (!pattern.test(val)) {
mismatch = true;
}
});
return mismatch ? {multilinePattern: {value: control.value}} : null;
};
}