I am making a template driven form in angular and I want to be able to change the colour of the label of an input e.g. a select, when the select is invalid.
Here is an example of of a select input from the form:
<div class="select__wrapper">
<label for="car-year">
<span>Year of manufacture</span>
</label>
<select
[(ngModel)]="vehicle.year"
name="year"
id="car-year"
required
class="form-control">
<option *ngFor="let year of years" [ngValue]="year.value">
</option>
</select>
</div>
When a select is invalid, the class ng-invalid
is added to the element.
It is easy enough to change the select styling with:
.select__wrapper {
.ng-invalid {
border-color: red;
color: red;
}
}
I also want to change the label colour when the select is invalid. I found the following on stackoverflow:
How to select parent pseudo-class from within child using scss
This uses sibling combinators but then I have to reorder my elements and hack them around with positions. I was wondering if there is a better was to do it with SCSS and/or angular?
Thanks
from Change the colour of a label when an input is invalid
No comments:
Post a Comment