Хобрук: Ваш путь к мастерству в программировании

Как настроить обязательный валидатор поля, чтобы не допускать строку только с пробелами

Скажем, у меня есть форма Angular Reactive

this.setupForm = fb.group({
  "name": ['John Smith', Validators.required]
});

и у меня есть поле формы

        <mat-form-field appearance="fill">
            <mat-label>Name</mat-label>
            <input type="text" matInput formControlName="name" />
            <mat-error *ngIf="name.invalid">A name is required</mat-error>

        </mat-form-field>

В этом случае имя поля формы является недопустимым, если оно не имеет значения. Однако это позволит использовать строку только с пробелами.

Как настроить валидатор в поле формы, чтобы оно было обязательным, а значение не могло быть просто пробелом?

angular angular-material
19.08.2020

  • вы также можете добавить шаблон к вашему вводу: например, pattern=\s*(\S\s*){10,}, чтобы иметь не менее 10 символов без пробела 19.08.2020

Ответы:


1

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

<mat-error *ngIf="name.invalid && !!name.value && !!name.value.trim()">A name is required</mat-error>.

Просто проверьте значение элемента управления формы и его обрезанное значение.

19.08.2020

2

Вы можете легко использовать проверку шаблона.

firstName: ['', [Validators.required,Validators.pattern(/^[A-z]*$/)]]
19.08.2020
  • это регулярное выражение делает недействительной любую строку с пробелом. Так что это поднимется, но также подхватит и Джона Смита. 19.08.2020

    • 3

    Этот пользовательский валидатор, кажется, работает

    export function NoWhitespaceValidator(control: AbstractControl) {
  var val = control.value;

  if(val.trim() == ''){
    return { nowhitespace: true}
  }
  else
  {
    return null;
  }
}

    Добавить в поле формы

      "name": ['', [Validators.compose([Validators.required, NoWhitespaceValidator])]]
    19.08.2020

    4

    Как насчет пользовательского валидатора?

    export function noWhiteSpaceValidator(): (control: AbstractControl) => ValidationErrors {
  return control => !(!!control.value && !!control.value.trim()) ? { whiteSpace: true } : null;
}

    А также :

    "name": ['John Smith', [Validators.required, noWhiteSpaceValidator]]
    19.08.2020
  • Это не сработало для меня, но я следовал той же концепции и создал свой собственный валидатор (см. мой ответ) 19.08.2020
  • Ведь так и должно было быть: !(!!control.value && !!control.value.trim()) 19.08.2020
    • Новые материалы
    Dall-E 2: недавние исследования показывают недостатки в искусстве, созданном искусственным интеллектом
    DALL-E 2 — это всеобщее внимание в индустрии искусственного интеллекта. Люди в списке ожидания пытаются заполучить продукт. Что это означает для развития креативной индустрии? О применении ИИ в..
    «Очень простой» эволюционный подход к обучению с подкреплением
    В прошлом семестре я посетил лекцию по обучению с подкреплением (RL) в моем университете. Честно говоря, я присоединился к нему официально, но я редко ходил на лекции, потому что в целом я нахожу..
    Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
    Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..
    Фишинг — Упаковано и зашифровано
    Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..
    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..