Логика регулярных выражений

Question

Я занимаюсь разработкой веб-приложения с использованием Angular 6. У меня вопрос: я создаю пользовательский компонент ввода (для ввода текста), например:

@Component({
  selector: 'input-text',
  templateUrl: './input-text.component.html'
  ]
})
export class InputTextComponent {

  @Input() pattern?: string;

}

Я хотел бы, чтобы пользователь могвставьте регулярное выражение для проверки поля ввода следующим образом:

<input-text pattern="^[a-z0-9_-]{8,15}$"></input-text>

Шаблон моего компонента определен так:

<input type="text" [attr.pattern]="pattern"/>

К сожалению, я ничего не знаю о регулярных выражениях.Я хотел бы сделать две вещи:

1 - Создать метод, который проверяет правильность регулярного выражения и изменяет визуальный стиль.

2 - Убедитесь, что если ввод (сpattern поле) вставляется в форму, атрибут form.valid остается ложным, пока выражение не будет действительным.Спасибо за вашу помощь!

Answer 1

1. Проверка правильности регулярного выражения

Вы можете просто перехватывать исключения, создаваемые конструктором RegExp при его создании.

try {
  const regex = new RegExp(pattern);
} catch (error) {
  // If it goes here, then the regex model is not correct
  console.error(error.message)
}

Изменение визуального стиля

Вы можете просто использовать атрибут ngClass, чтобы изменить свой стиль ввода.Если вы введете оператор catch, установите переменную стиля, чтобы изменить класс следующим образом:

private hasBadInput: boolean;
// [...]
catch (error) {
  hasBadInput= true;
}

Затем примените определенный класс в этом случае:

<input-text [ngClass]="{'yourErrorClass': hasBadInput}"><input-text>

Срок действия формы

Вы хорошо справились с использованием [attr.pattern], форма должна автоматически учитывать введенный шаблон.Прежде чем создавать формы в формате Angular 2+, вы должны сначала попытаться использовать форму с жестко написанным регулярным выражением, а затем использовать вводимое.
Следуйте этому официальному руководству .