I have a reactive form, where each control follows this basic structure:
<div class="form-group">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control" placeholder="Type"/>
</div>
Angular automatically adds validation classes to each FormControl and FormGroup, such as ng-valid, ng-touched, ng-dirty, etc.
For styling purposes, I would also like to apply these same classes to the control's parent div element. For example:
<div class="form-group ng-dirty ng-touched ng-invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
I have not found a native way to do this with Angular. I attempted to create a directive that would sync the parent div's classes with the control's validation classes, but I am unable to handle the touched event in order to set the ng-touched/ng-untouched classes on the parent element.
Any help would be greatly appreciated!
touched
flag is set as a response for a simpleblur
event. You can reproduce it this way. – mat3e