Tengo un formulario para agregar reseñas y agregué un componente de calificación de estrellas personalizado. Se requiere el valor del formulario de 'calificación', por lo que no le permitirá enviar sin seleccionar una calificación, pero no hay comentarios. Por lo tanto, me gustaría resaltar la sección de estrella de revisión si no tiene valor en el envío como si fuera un campo de formulario angular.
<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>```Sin embargo, si desea "resaltar" la calificación, si no se elige, puede hacerlo verificando la validez del control de formulario. La función setRating según mi suposición establece el valor para el control de formulario. Entonces, ¿quieres mostrar un mensaje si no se elige? Bueno, entonces solo verifica que si
form.get('rating').value > 0... y cualquier otra verificación que desee hacer, como ¿se ha enviado el formulario?
Si desea adjuntar una clase al campo si no es válido, entonces podría usar algo como:
[ngClass]="form.get('rating').value > 0 ? 'valid': 'not-valid'"Veo que está utilizando material angular, por lo que es posible que desee modificar las condiciones si está utilizando la configuración predeterminada predeterminada del material angular para cuando se muestran los mensajes de error. Pero al verificar la validez del campo de formulario, puede aplicar estilos, etc. para imitar el comportamiento material "normal".