Как добавить шаблоны регулярных выражений для ввода на основе выбора раскрывающихся списков в угловом материале
Я использую угловой материал, и на основе выбора раскрывающегося списка должно быть изменение шаблонов в поле ввода. я сделал таким образом, но я не могу получить сообщение об ошибке в HTML, а также мне нужно сократить строки кода, вместо того, чтобы писать условие if else, как его можно вызвать динамически.
ТС:
onDropDownChange(event: any) {
if (event == 1) {
this.form.get('inputValue').reset();
this.form
.get('inputValue')
.setValidators(Validators.pattern('[0-9]{12}'));
} else if (event == 2) {
this.form.get('inputValue').reset();
this.form
.get('inputValue')
.setValidators(Validators.pattern('[A-Z]{2}d{7}'));
} else if (event == 3) {
this.form.get('inputValue').reset();
this.form
.get('inputValue')
.setValidators(Validators.pattern('d{6}[A-Z]{3}'));
}
}
HTML:
<mat-form-field style = "width:80%;" class = "select-input-field">
<mat-select [(value)] = "selected" placeholder = "Inspection Type" (selectionChange) = "onDropDownChange($event)">
<mat-option [value] = "">None</mat-option>
<mat-option *ngFor = "let inspectionType of inspectionTypes" [value] = "inspectionType.inspection_type_id">{{inspectionType.description}}</mat-option>
</mat-select>
</mat-form-field>
<form [formGroup] = "form">
<input type = "text" formControlName = "inputValue" placeHolder = "predicatePlaceHolder" >
{{form.get('inputValue').hasError('pattern')}}
<mat-error class = "alert-danger" *ngIf = "form.get('inputValue').hasError('pattern')" >
Invalid User</mat-error>
</form>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Представьте массив, содержащий все ваши строки шаблонов, упорядоченные, как вы уже делали, что-то вроде:
validators = [ first_pattern_string,second_pattern_string, third_pattern_string];
Затем измените обработчик событий на что-то вроде:
onDropDownChange(event: number, inputValue = this.form.get('inputValue')) {
inputValue.reset();
inputValue.clearValidators();
inputValue.setValidators(Validators.pattern(this.validators[event-1]));
inputValue.updateValueAndValidity();
}
Обновлено:
Теперь, когда вы добавили демонстрацию, я вижу, что вы возвращаете не число из события, а свойство объекта. Поэтому вам нужно найти индекс его объекта и использовать его для получения элемента из массива валидаторов.
Кроме того, вам нужно создать настоящий RegExp, а не просто строки.
Вот рабочий пример: https://stackblitz.com/edit/angular-material-dropdown-jlhc1h
Итак: замените regExp, который я поставил, и все готово.
спасибо за ответ, что если у меня есть строка вместо числа
я добавил демо, пожалуйста, проверьте и исправьте меня
Будет ли работать, если поставить [+event-1] вместо [event-1]?
я проверю, но для шаблона он не показывает ошибку
любая помощь, которую я также создал демо
Проверьте отредактированный ответ.
спасибо за ответ @Misha, меня беспокоит то, что у меня не только 3 объекта в массиве, у меня есть 10 объектов среди этих 10 объектов, эти объекты могут иметь любой индекс в нем, поэтому, соответственно, его нужно проверить
привет Миша, одна помощь, здесь на основе выбора раскрывающегося списка я устанавливаю шаблон, но теперь, как я могу сделать ввод, чтобы принимать только числа, а не альфа, несколько раскрывающихся списков могут иметь дефис, а один раскрывающийся список имеет 2 альфа-символа, поэтому в этом ситуация, как с этим можно справиться?
Вы имеете в виду запрет пользователю вводить ограниченные символы или разрешение ему вводить, но рассматривать это как недопустимый ввод?
например, у меня есть только 7-значные числа, поэтому это должно разрешать только числа без алфавитов и специальных символов в самом вводе пользователя, который должен быть ограничен
Хотя убедитесь, что вы действительно получаете число из события, иначе измените его тип.