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

Я разрабатываю веб-приложение, используя 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 остается ложным до тех пор, пока выражение не будет действительным. Спасибо за вашу помощь!

Всего 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)
}
  1. Изменение визуального стиля

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

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

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

<input-text [ngClass]="{'yourErrorClass': hasBadInput}"><input-text>
  1. Срок действия формы

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


Есть идеи?

10000