Dynamic pattern for input field in angular

Question

I have an input field driveletterMount:

<input
    id="labelPath{{ i }}"
    name="labelPath{{i}}"
    type="text"
    #labelPath="ngModel"
    class="form-control"
    [(ngModel)]="diskItem.labelPath"
    pattern=""
    [disabled]="isDisabled || i<=0"
    [required]
    />

Here I need a dynamic pattern for the field with a condition.
For example:

If the os type is Windows then:

pattern="[0-9][0-9]"

If os is linux then:

pattern="^(\/[a-zA-Z0-9_-]+)+$(?<!^\/bin|\/dev|\/etc|\/mnt|\/opt|\/run|\/srv|\/sys|\/tmp|\/usr|\/var|\/lib|\/proc|\/sbin|\/root|\/boot|\/home|\/lib64|\/media|\/usr\/bin|\/usr\/lib|\/usr\/lib64|\/usr\/sbin|(\/usr\/bin)|(\/usr\/lib)|(\/usr\/lib64)|(\/usr\/sbin)$)"

Alex Walker · Accepted Answer · 2020-06-04 09:53:41Z

3

This is a complex condition that should be handled in the component's TypeScript file. (*.ts)

Add a method to the TS file called, say, getPattern:

get pattern(): string {
    if (this.osIsWindows) {
        return "[0-9][0-9]";
    } else if (this.osIsLinux) {
        return "^(\/[a-zA-Z0-9_-]+)+$(?<!^\/bin|\/dev|\/etc|\/mnt|\/opt|\/run|\/srv|\/sys|\/tmp|\/usr|\/var|\/lib|\/proc|\/sbin|\/root|\/boot|\/home|\/lib64|\/media|\/usr\/bin|\/usr\/lib|\/usr\/lib64|\/usr\/sbin|(\/usr\/bin)|(\/usr\/lib)|(\/usr\/lib64)|(\/usr\/sbin)$)";
    } else {
        return ""; // TODO: default value
    }
}

get osIsWindows(): boolean {
    // TODO: implement this
}

get osIsLinux(): boolean {
    // TODO: implement this
}

Then, in your HTML:

<input
             id="labelPath{{ i }}"
             name="labelPath{{i}}"
             type="text"
             #labelPath="ngModel"
             class="form-control"
             [(ngModel)]="diskItem.labelPath"
             [pattern]="pattern"
             [disabled]="isDisabled || i<=0"
             [required]
            />

(Footnote: The original version of this answer used a method called getPattern(). As discussed in the comments, this is nonstandard, so I have updated it to use a get accessor.)

edited Jun 4, 2020 at 9:53

answered Jun 4, 2020 at 9:26

Alex Walker

2,3562 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Cagri Tacyildiz Over a year ago

function in html is not good for perfomance. and pattern is not binding then you have to take inside between {{}} but function always listen then not good approach to use if you dont have to listen always

Alex Walker Over a year ago

It depends on the use case. If the condition is something that takes a long time to evaluate, and you can verify at init time and never have to worry about again, then yes, it is more performant to store it to a component variable and just retrieve that. However I can't imagine that the implementations of osIsLinux, osIsWindows, etc ... will be particularly complex, so I like to prioritise maintainability of the code.

Alex Walker Over a year ago

You're right that I forgot to add [] around pattern. Fixed.

Aluan Haddad Over a year ago

@AlexWalker it's not necessarily a question of how long it takes to compute the expression but rather that a method call or accessor reference is opaque to the binding engine and this results in dirty checking. On an unrelated note, an accessor would be more idiomatic than a method.

Aluan Haddad Over a year ago

@AlexWalker, indeed true. I voted for the answer so I'm not complaining. Just got involved in the discussion.

|

upinder kumar · Accepted Answer · 2020-06-04 09:32:10Z

Try this :

 if (navigator.appVersion.indexOf("Win") != -1) {
       this.pattern="[0-9][0-9]";
}
 if (navigator.appVersion.indexOf("Linux") != -1) {
this.pattern="^(\/[a-zA-Z0-9_-]+)+$(?<!^\/bin|\/dev|\/etc|\/mnt|\/opt|\/run|\/srv|\/sys|\/tmp|\/usr|\/var|\/lib|\/proc|\/sbin|\/root|\/boot|\/home|\/lib64|\/media|\/usr\/bin|\/usr\/lib|\/usr\/lib64|\/usr\/sbin|(\/usr\/bin)|(\/usr\/lib)|(\/usr\/lib64)|(\/usr\/sbin)$)"
}

and in html

  <input
             id="labelPath{{ i }}"
             name="labelPath{{i}}"
             type="text"
             #labelPath="ngModel"
             class="form-control"
             [(ngModel)]="diskItem.labelPath"
             pattern="{{pattern}}"
             [disabled]="isDisabled || i<=0"
             [required]
            />

Collectives™ on Stack Overflow

Dynamic pattern for input field in angular

2 Answers 2

15 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related