Having trouble validating a dropdown select box, possibly due to a CSS issue. Any suggestions on how to fix this validation problem?
Check out the demo here: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.component.html
Here's the code snippet from app.component.html:
<div class="form-group col">
<select id="inputState" #state="ngModel" [(ngModel)]="model.state" name="state" [ngClass]="{'invalid-textbox' :signUpForm.submitted && !state.valid }">
<option>Select</option>
<option *ngFor="let optionName of formFields" value="{{optionName}}">{{optionName}}</option>
</select>
</div>
And here's the relevant CSS code from app.component.css:
input[type=text].invalid-textbox,
select.invalid-textbox,
input[type=password].invalid-textbox {
border-bottom: 2px solid #ed5558;
}