I have the following code for state selection in an Angular 18 site I'm working on. <select class="form-select" id="state" name="state" required [(ngModel)]="info.state"> <option [ngValue]="null" disabled>Select...</option> <option *ngFor="let x of stateList" [value]="x.value">{{x.text}}</option> </select> <div class="invalid-feedback"> <fa-icon [icon]="fasExclamationCircle"></fa-icon> This field is required. </div> I initialize info.state to null when it's created, so the disabled option shows in the select control. If I immediately apply .was-validated to the form, the select gets a green border, green check and the "required" message isn't shown. The control itself is :valid, but has the .ng-invalid class. This doesn't seem to be working how I'd like. I can get it all working by taking out the disabled option and not having anything shown or selected by default. I can also add a directive that will add .is-invalid as a class when the disabled item is selected, but that only allows the "required" message to show - it's still green with a checkmark. My UI/UX team wants the "Select" to be shown and doesn't want to alter the default bootstrap CSS for fear of making it harder to maintain in future updates. If I could do that, I'd replace :valid with .ng-invalid in the styles and be done. But that's not an option right now. Any other ideas on how I get the control to fall to :invalid in this scenario? A directive I can add or some other way to change things and still get what I want? Thoughts? Continue reading...
