hlmSelect does not have an invalid state style

[benjaminforras]

Please provide the environment you discovered this bug in.

Copy pasted from the components page and added ngModel with a validator.

Which area/package is the issue in?

select

Description

While Angular adds the necessary ng-invalid ng-touched classes to the host (brn-select), the helm does not provide any styling for the invalid state. Also, if wrapped in hlmLabel the label also doesn't change (based on the classes it only checks for hlmInput state).

Please provide the exception or error you saw

No response

Other information

No response

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

• Yes
• No

[goetzrobin]

@thatsamsonkid is this related to your most recent tests?

[thatsamsonkid]

@goetzrobin if i understood correctly it just the appearance of the error state for select using ng-model is not working as expected. So label is not turning red essentially. So separate issue from the other one im pretty sure.

[thatsamsonkid]

I will add I don't think we have support for wrapping the select in a label because label won't have access to ngControl in this case. Unless anyone has any ideas on that one. I can only think to have brnLabel check for instances of select as a contentchild in this case

[goetzrobin]

@benjaminforras does this example help:

spartan/libs/ui/select/select.stories.ts

Line 133 in 5952cd4

export const ReactiveFormControlWithValidation: Story = {

I see your label seems to be missing the hlmLabel directive and you are using the brn-select instead of the helm-select component. We should probably double check the docs and add examples for template driven and reactive forms

[benjaminforras]

My bad, I provided a less context to this issue that I intended.
So here's my code:

<div>
  <label class="relative" hlmLabel>
    Type
    <brn-select
      class="my-1 block w-full md:min-w-56"
      #typeInput="ngModel"
      [(ngModel)]="newEntry.type"
      [validators]="typeValidators"
      name="type"
      placeholder="Select an option">
      <hlm-select-trigger class="w-full md:min-w-56">
        <hlm-select-value />
      </hlm-select-trigger>
      <hlm-select-content class="w-full">
        @for (option of newEntryOptions; track option) {
          <hlm-option [value]="option">{{ option }}</hlm-option>
        }
      </hlm-select-content>
    </brn-select>
    <error-message [control]="typeInput" />
  </label>
</div>

With the example you've provided still does not apply the invalid styles for the select component.
The focus is not on the label, but the select element itself. While Angular applies the required ng-invalid class to the element, the element itself does not provide any styling to visualize the invalid state of the component:

This is for a simple text input:

Hope this helps! :)

TLDR: hlmSelectTrigger does not have these classes: [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive [&.ng-invalid.ng-touched]:text-destructive

more context:

• the validators directive:
  
• the error-message component:
  
  

[thatsamsonkid]

@benjaminforras Ah I see unfortunately Shadcn styling doesnt actually turn the select (destructive red) by default if you want to be that way then you would need to modify to that but seems they only give label and error message the red styling for denoting an error. See the example here under select form https://ui.shadcn.com/docs/components/select

Here's a screenshot also

[benjaminforras]

Got it, I just pointed out an inconsistency ;).

But as I see it, it does not have styling for a simple text input if we are basing it on shadcn.

@goetzrobin

[goetzrobin]

I think adding the styling is a nice touch and I'd like to support it. I'll take a look at it

[thatsamsonkid]

@goetzrobin This reminds me we need to an create an error directive also so we can easily show hide the error as well similar to mat-error and keep the styling and spacing consistent when attached to a form field