Monday 2 November 2020

Change the colour of a label when an input is invalid

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