CODEWITHSUNDEEP
javascriptangulartypescript
Smokey Dawson
Smokey Dawson

Reputation: 9230

add a unit after the text input in an input field angular 5

I know you can have a unit next to an input field using spans and what not but that doesnt look the best and it has a lot of room for error, like the value going past the unit

so say I have an input for weight and want to have kg at the end of what a user types so

80kg

is there a way I can dynamically add the 'kg' to the end of the number in the input??

I have an input like so..

<input [(ngModel)]="toolValue" type="number" class="tool_input tool_input__value" placeholder="Enter your value" required>

I basically want to do something like this

toolValue.onInput === toolValue + 'kg';

is this possible??

Upvotes: 0

Views: 836

Answers (1)

basarat
basarat

Reputation: 275849

is this possible

Yes. But would be an awful experience.

A few things you will have to do:

  • Cursor management: Make sure the user can't edit the 'kg'
  • Selection management: Perhaps you don't want kg to be selectable.

Its really up to you what you want and the edge cases you want to deal with. I would just style an extra span at the end.

Upvotes: 1

Related Questions