How can I change form validation pattern based on dropdown selection?

Question

I'm setting up form validation in the UI for one of our projects. One of the text boxes needs to have a differing validation pattern based on the selection of a previous dropdown. For example, if the dropdown selection is name, the pattern should be:

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

where as if it is number, it should be:

pattern='[0-9 ]+`

I've setup a function in the component to set up a validation string based on that selection:

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;
    }
}

And in the HTML, I have the following. setField is a function to actually choose the field; validationType is what I'm trying to use to create the validation pattern for the input:

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

And here is the input the form validation is on:

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

I have two issues so far:

How can I properly pass either the value of the validationPattern variable or the output of the validationType() function to pattern in the input? As of right now, it seems to be reading this.validationPattern as the actual pattern - that is, the words this.validationPattern and not the associated value. No matter if I select name or number, anything I type in is invalid.
How can I use validationType() outside of the click? I've been told it is very bad practice to have more than one function associated to a (click), and in this particular case, it should be reserved for setField().

[this might help you](https://stackoverflow.com/questions/280759/jquery-validate-how-to-add-a-rule-for-regular-expression-validation) — Dhaval Pankhaniya, Oct 18 '18 at 14:17

score 1 · Accepted Answer · answered Oct 18 '18 at 14:17

Both of your questions are valid one -

Binding validationPattern variable

Your code is looking fine however it require small correction to get the value from ts file to html. As of now you are no using bracket [] so whatever you will pass it will take as string value. If you want to get some dynamic value you must use brackets.

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

How can I validationType() outside of the click ?

Right, calling multiple function within click is not good practice however it doesn't impact on the execution. In your case you are calling one function setField already. You can leverage this function you can validationType inside setField.

ex:

in ts

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

score 0 · Answer 2 · answered Oct 18 '18 at 14:02

To bind the pattern property to validationPattern, use property binding:

[pattern]="validationPattern"

As for calling two functions in one event handler, I don't see it as bad practice, especially for a button click event which is not triggered so frequently.

How can I change form validation pattern based on dropdown selection?

2 Answers2

in ts