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