Как настроить валидацию на запрет двух пробелов и спец.символов?

Для настройки валидации в Angular, есть несколько способов. В данном случае мы можем использовать регулярные выражения, чтобы проверить наличие двух пробелов и специальных символов.

Первым шагом будет создание собственного валидатора, который будет выполнять проверку на наличие двух пробелов и специальных символов. Для этого создадим файл custom-validator.ts и определим в нем свой валидатор noDoubleSpacesAndSpecialCharacters:

import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';

export function noDoubleSpacesAndSpecialCharacters(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value: string = control.value;

    const doubleSpacesRegex = /  /; // регулярное выражение для поиска двух пробелов подряд
    const specialCharactersRegex = /[!@#$%^&*(),.?":{}|<>]/; // регулярное выражение для поиска специальных символов

    const hasDoubleSpaces = doubleSpacesRegex.test(value);
    const hasSpecialCharacters = specialCharactersRegex.test(value);

    if (hasDoubleSpaces || hasSpecialCharacters) {
      return { doubleSpacesAndSpecialCharacters: true }; // возвращаем ошибку, если найдены два пробела или специальные символы
    }

    return null; // возвращаем null, если валидация успешна
  };
}

Далее, чтобы этот валидатор использовался в нашей форме, мы можем импортировать его и добавить его в список валидаторов для соответствующего поля формы. Например, если у нас есть форма для создания нового пользователя с полем username, мы можем использовать наш валидатор следующим образом:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { noDoubleSpacesAndSpecialCharacters } from './custom-validator';

@Component({
  selector: 'app-user-form',
  template: `
    <form [formGroup]="userForm">
      <input type="text" formControlName="username" />
      <div *ngIf="userForm.get('username').errors?.doubleSpacesAndSpecialCharacters">
        Недопустимые символы или два пробела подряд!
      </div>
    </form>
  `
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.userForm = this.formBuilder.group({
      username: ['', [Validators.required, noDoubleSpacesAndSpecialCharacters()]]
    });
  }
}

Теперь при введении значения в поле username, валидатор будет проверять наличие двух пробелов и специальных символов. Если какое-либо из этих условий нарушается, поле будет помечено как недопустимое, и отображено сообщение об ошибке.