Как я могу изменить шаблон проверки формы на основе выпадающего списка?

Question

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

pattern='[a-zA-Z ]+'

, где, как если бы он был number, он должен быть:

pattern='[0-9 ]+`

I 'Мы установили функцию в компоненте, чтобы установить строку проверки на основе этого выбора:

fields: string[] = [];
validationPattern: string;

private validationType(field: string[]) {
    if (field.includes('number')) {
        this.validationPattern = '[0-9]+';
        return this.validationPattern;
    } else if (field.includes('name')) {
        this.validationPattern = '[a-zA-Z1-9][a-zA-Z0-9 ]+';
        return this.validationPattern;
    }
}

И в HTML у меня есть следующее.setField - это функция, которая фактически выбирает поле;validationType - это то, что я пытаюсь использовать для создания шаблона проверки для ввода:

<div ngbDropdownMenu>
    <button
        *ngFor="let selected of fields"
         class="dropdown-item"
         (click)="setField(selected); validationType(selected)">
         {{ selected }}
    </button>
</div>

А вот вход, на котором выполняется проверка формы:

<input
    type="text"
    id="value"
    name="value"
    placeholder="Value"
    #value1="ngModel"
    pattern=this.validationPattern
    [(ngModel)]="profile.value">

У меня есть двапроблемы на данный момент:

1. Как правильно передать значение переменной validationPattern или выходные данные функции validationType () в шаблон во входных данных?На данный момент, кажется, что this.validationPattern читается как фактический шаблон, то есть слова this.validationPattern, а не связанное значение.Независимо от того, выберу я имя или номер, все, что я ввожу, будет неверным.

2. Как я могу использовать validationType () вне клика?Мне сказали, что это очень плохая практика - иметь более одной функции, связанной с (щелчком), и в этом конкретном случае она должна быть зарезервирована для setField ().

Answer 1

Оба ваших вопроса верны -

1. Переплет validationPattern переменная

Ваш код выглядит нормально, но требует небольшой корректировкичтобы получить значение из файла TS в HTML.На данный момент вы не используете скобку [], поэтому все, что вы передадите, будет принимать строковое значение.Если вы хотите получить динамическое значение, вы должны использовать скобки.

 <input
    type="text"
    id="value"
    name="value"
    placeholder="Value"
    #value1="ngModel"
    [pattern]="validationPattern"  <!-- Get the dynamic value of validationPattern
    [(ngModel)]="profile.value">

Как я могу validationType () вне клика?

Правильно, вызов нескольких функций в click не является хорошей практикой, однако это не влияет на выполнение.В вашем случае вы уже вызываете одну функцию setField.Вы можете использовать эту функцию, вы можете validationType внутри setField.

ex:

в ts

setField(selected){
    this.validationType(selected);
}

Answer 2

Чтобы связать свойство pattern с validationPattern, используйте привязку свойства :

[pattern]="validationPattern"

Что касается вызова двух функций в одном обработчике событий, я его не вижукак плохая практика, особенно для события нажатия кнопки, которое вызывается не так часто.