Closed benjaminforras closed 3 weeks ago
@thatsamsonkid is this related to your most recent tests?
@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.
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
@benjaminforras does this example help: https://github.com/goetzrobin/spartan/blob/5952cd406d6b2102d02e69d45ee760b4696c1fe8/libs/ui/select/select.stories.ts#L133 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
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
@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
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
I think adding the styling is a nice touch and I'd like to support it. I'll take a look at it
@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
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