My form is structured using a template-driven approach.
<div class="form-group">
<label for="guitar" class="col-sm-6">Guitar:</label>
<div class="col-sm-6">
<input id="guitar" type="text">
<p *ngIf="template driven template ngIf">Warning!</p>
</div>
</div>
When I input invalid characters in <input id="guitar">, the <input> element will be styled with:
border: 2px solid red as demonstrated:
input.form-control.ng-invalid.ng-touched {
border: 2px solid red;
}
and display the message <p>Warning!</p>.
This functionality works effectively.
Is there a way to change the color of:
<label for="guitar">Guitar:</label>
to red when <p>Warning!</p> is visible and <input> has a border?