Pattern Matching for Excluding Multiple Specific Phrases

Question

Pattern Matching for Excluding Multiple Specific Phrases

I need to restrict what a user can enter into a field based on previous entries that are already in the system.

For instance, the user has already entered these values into the database:

["typescript", "C#", "python"]

If they type one of these existing values exactly into the input field, I want a validation message to appear.

I found a negative look-ahead Regex that somewhat works:

^(?!.*(typescript|C#|python)).*$

However, it will trigger validation error if any of those words appear anywhere in the input string (for example: "pythons" would trigger the error). I only want it to fail if one of those words appears exactly as entered.

UPDATE

I opted for the custom validator solution provided below. The regex approach also worked but validators were deemed more appropriate for this specific issue.

regex angular typescript

Answer 1

Answer №1

If you are seeking a solution using regex, you can utilize the following regular expression to exclude matches that exactly match any of the following:

typescript
C#
python

To implement the negative look ahead as per your request, it should be typed in this format:

^(?!(?:typescript|C#|python)$).+$

Check out the Regex Demo here

Answer 2

If you are seeking a solution using regex, you can utilize the following regular expression to exclude matches that exactly match any of the following:

typescript
C#
python

To implement the negative look ahead as per your request, it should be typed in this format:

^(?!(?:typescript|C#|python)$).+$

Check out the Regex Demo here

Answer 3

Answer №2

Avoid using regular expressions as they can be excessive, consider utilizing a custom validator instead.

export function usedNames(validNames: string[]): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    if (validNames.includes(control.value)) {
      return null;
    } else {
      return { usedNames: {value: control.value} };
    }
  };
}

Usage (reactive form):

new FormGroup({
  'language': new FormControl(this.hero.name, [
    Validators.required,
    usedNames(['typescript', 'C#', 'python']) // <-- Here's how you pass in the custom validator.
  ]),
  // ... (other inputs)
});

Usage (template form):

@Directive({
  selector: '[appUsedNames]',
  providers: [{provide: NG_VALIDATORS, useExisting: UsedNamesDirective, multi: true}]
})
export class UsedNamesDirective implements Validator {
  @Input('appUsedNames') usedNames: string;

  validate(control: AbstractControl): {[key: string]: any} | null {
    return this.usedNames ? usedNames(this.usedNames)(control) : null;
  }
}

Additionally, consider using a select element instead of an input, or include a list and <datalist> to guide the user on what to type...

Answer 4

Avoid using regular expressions as they can be excessive, consider utilizing a custom validator instead.

export function usedNames(validNames: string[]): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    if (validNames.includes(control.value)) {
      return null;
    } else {
      return { usedNames: {value: control.value} };
    }
  };
}

Usage (reactive form):

new FormGroup({
  'language': new FormControl(this.hero.name, [
    Validators.required,
    usedNames(['typescript', 'C#', 'python']) // <-- Here's how you pass in the custom validator.
  ]),
  // ... (other inputs)
});

Usage (template form):

@Directive({
  selector: '[appUsedNames]',
  providers: [{provide: NG_VALIDATORS, useExisting: UsedNamesDirective, multi: true}]
})
export class UsedNamesDirective implements Validator {
  @Input('appUsedNames') usedNames: string;

  validate(control: AbstractControl): {[key: string]: any} | null {
    return this.usedNames ? usedNames(this.usedNames)(control) : null;
  }
}

Additionally, consider using a select element instead of an input, or include a list and <datalist> to guide the user on what to type...

Pattern Matching for Excluding Multiple Specific Phrases

Answer №1

Answer №2

Similar questions

Is there a way to obtain the coordinates of an SVG element by simply clicking on a specific point?

Generate a series of HTTP requests using an HTTP interceptor

Identify any missing periods and combine the years into a single range

Uploading Images to Imgur with Angular 4

How can I extract an object from an array by using a string key in either Observable or lodash?

Disallow specific sequences of characters

The use of regular expressions is not equipped to deal with unexpected square brackets

Google Chrome does not display Set-Cookie header on page loads

Is it possible to transfer files using web-bluetooth technology?

Tips for deciding on the appropriate CSS for an Angular 6 navbar component

Is it possible to use the provide() method with a string in Angular 2 when writing

Why is TS1005 triggered for Redux Action Interface with an expectation of '=>'?

ESLint version 8.0.0 encountered an error while attempting to fetch the '@typescript-eslint' plugin

Incorporating a JavaScript npm module within a TypeScript webpack application

Combining MSAL ADB2C with Visual Studio 2017 Angular Starter Kit

Troubleshooting Angular MIME problems with Microsoft Edge

Intellisense from @reduxjs/toolkit is not showing up in my VS Code editor

What is the best way to delay an observable from triggering the next event?

The Vue application combined with TypeScript is displaying an empty white screen

Having trouble invoking the child component when the button is clicked