How to only limit length for user input but let any length to be entered programatically

Question

In this scenario the input field is limited to 5 Characters for the user to enter, once the user enters the 5 characters I append programatically a kind of description for the input to it (USER-Description).

Since the actual input will be the users input i want that to be limited to 5 but I should be able to programatically add a string of any length. When I do this currently the input field stays Red as if the required flag is on.

You can't "sort of" limit the length. You either limit it, or you don't. you don't need the input to be able to store the value programmatically - You can use a variable instead (For example) — Alon Eitan
– Alon Eitan, Commented May 28, 2021 at 14:13

LogicBlower · Accepted Answer · 2021-05-28 14:32:50Z

I think below points may help

You can add a empty box and maxLength Validation on (focus). and on (blur) remove the validation and apeend extra text.

or

you can do via css Trick, make a input group box. (input + div). (search input-group bootstrap for more info). Have input a validation of 5 charter in input box and on focus and blur play with your append logic.

point 1 code will look something like this

 <input type="text" (focus)="firstName.maxLength = 5" (blur)="appendString()" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" required />

So i ended up having a variable bound to [maxlength] which i manipulate in onFocus by setting to the maxLength I want and onBlur i set it to 100. turns out the input box turning red was due to the ngClass I have set for invalid inputs [ngClass]="{ 'is-invalid': invalid }" . If you dont have a invalid class implemented like this for a normal input the issue shouldnt be there.

Collectives™ on Stack Overflow

How to only limit length for user input but let any length to be entered programatically

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related