How to restrict input field from accepting special characters in Angular?

Question

I have a input field that should not be blank and should not allow special characters.

I have something like this for validation:

if (value === '' || !value.trim()) {
      this.invalidNameFeedback = 'This field can not be blank.';
      return false;
    } else if (!value.match(/[\p{Letter}\p{Mark}]+/gu)) {
      this.invalidNameFeedback = 'This field can not contain special characters.';
      return false;
    }

This allows special characters when entered with alphabets or numbers. I dont want allow special characters at all.

Answer 1

You could check the whole value to only match a selected character class and use for example .test()

^[\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]+$

See the regex matches.

Example

if (value === '' || !value.trim()) {
    this.invalidNameFeedback = 'This field can not be blank.';
    return false;
} else if (!/^[\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]+$/u.test(value)) {
    this.invalidNameFeedback = 'This field can not contain special characters.';
    return false;
}