Add support for adding prefix and suffix elements to input

[thatsamsonkid]

Which scope/s are relevant/related to the feature request?

input

Information

Similar to mat-form-field and their support for adding prefix and suffix elements to an input, it would be great if we could support something similar as well.

@ashley-hunter gave the below example of what we would need to support this.

<hlm-input-group>
  <ng-icon name="lucideEmail" hlmInputPrefix />
  <input class="w-80" hlmInput placeholder='Email' type='email' />
</hlm-input-group>

Describe any alternatives/workarounds you're currently using

N/A

I would be willing to submit a PR to fix this issue

• [x] Yes
• [ ] No

[thatsamsonkid]

So actually on this topic curious on to hear some thoughts on this, because I was already working on #591 so i created a brn-form-field/hlm-form-field directive to help support linking hint and errors to the input with id's. So I can had the prefix and suffix support to this but I guess does hlm/brn-form-field make it sound too much like you have to use a form with it? I mean material does it this way so maybe I'm just thinking too hard about it.

So the solution would look like the below for an input that had everything single item, similar to mat-form-field structure at the end of the day.

<hlm-form-field>
    <ng-icon name="lucideEmail" hlmInputPrefix />
    <input class="w-80" hlmInput placeholder='Email' type='email' />
    <hlm-hint>Use a a valid email</hlm-hint>
    <hlm-error>A valid email is required</hlm-error>
</hlm-form-field>

So thoughts on this solution? Open to other ideas/suggestions as well!

[ashley-hunter]

I'm fine with this being a child of the form field component, I guess really the main thing to decide is the scope of this. If it's part of form group, do we want it to work with all form controls, e.g. input, select, combobox etc.. or is this an input only thing?

[thatsamsonkid]

Yea thats a good point, I think maybe for simplicity we could do just do input and in that case it might make sense to keep it separate with the directive you suggested. Either that or we have to make this work with all the other form controls I suppose. I'm curious how material does this or does it just give a dev error that prefix/suffix cant be applied to certain controls?

[ashley-hunter]

Looks like Material supports many different form controls with suffix and prefixes:

https://stackblitz.com/edit/1kytuayg-cy7nx4gn?file=package.json

Not sure how feasible this would be in our case though.

[thatsamsonkid]

Yea agree not sure if we would be able to do it well for all the other control types. I think scoping this to just the input would be a good place to start and we can keep it as a separate directive as you mentioned rather than with form field generically. Honestly I feel like this is the primary control people would expect this anyways but this is just my thoughts. It does suck a bit that the template would be a little more busy in this case but it might make the most sense for us. @goetzrobin @elite-benni Any thoughts on this?

[elite-benni]

I think it would be nice to have it for other formcontrols as well. I am a fan of having a "ruleset" for similar cases that can be used, because I think it feels simpler overall if the same concept is used. Additionally it's easier to keep everything consistent, if there's a recommended way how you can do it.

[MerlinMoos]

Hey @ashley-hunter and @elite-benni, will that be provided in the v1 release?

[ashley-hunter]

Hey, it is in the milestone for 1.0, so should be yes!