I have a form for adding reviews, and added a custom star rating component. The 'rating' form value is required, so it won't let you submit without selecting a rating, but there is no feedback. So I would like it to highlight the review star section if it has no value on submit as if it were an angular form field.
<div class="stars-wrapper" title="Rating: {{ form.get('rating').value }} out of 5 stars">
<div class="star-button-wrapper" *ngFor="let i of [1,2,3,4,5]">
<button class="star-button" type="button" (click)="setRating(i)" attr.aria-label="Set Rating to {{i}} stars" >
<mat-icon class="full-star" *ngIf="form.get('rating').value >= i">star</mat-icon>
<mat-icon class="empty-star" *ngIf="form.get('rating').value < i">star_border</mat-icon>
</button>
</div>
</div>```
However you want to to "highlight" the rating if not chosen you can do it by checking the formcontrol validity. setRating function by my assumption sets the value for the formcontrol. So do you want to display a message if not chosen, well then just check that if
form.get('rating').value > 0
...and any other checks you might want to do, like has the form been submitted?
Want to attach a class to the field if it is not valid, well, then you could use something like:
[ngClass]="form.get('rating').value > 0 ? 'valid': 'not-valid'"
I see you are using angular material so you might want to tinker with the conditions if you are using the default angular material default settings for when the error messages are shown. But with checking the validity of the formfield you can apply styles etc to mimic "normal" material behavior.