#javascript #html #angular #forms
#язык JavaScript #HTML #угловой #формы
Вопрос:
У меня есть форма для добавления отзывов, и я добавил пользовательский компонент оценки звезд. Значение формы «рейтинг» обязательно, поэтому она не позволит вам отправить заявку, не выбрав рейтинг, но обратной связи нет. Поэтому я хотел бы, чтобы он выделил раздел «Звезда обзора», если он не имеет значения при отправке, как если бы это было поле угловой формы.
lt;div class="stars-wrapper" title="Rating: {{ form.get('rating').value }} out of 5 stars"gt; lt;div class="star-button-wrapper" *ngFor="let i of [1,2,3,4,5]"gt; lt;button class="star-button" type="button" (click)="setRating(i)" attr.aria-label="Set Rating to {{i}} stars" gt; lt;mat-icon class="full-star" *ngIf="form.get('rating').value gt;= i"gt;starlt;/mat-icongt; lt;mat-icon class="empty-star" *ngIf="form.get('rating').value lt; i"gt;star_borderlt;/mat-icongt; lt;/buttongt; lt;/divgt; lt;/divgt;``` Комментарии:
1. Это не входные данные, поэтому вам следует
valid, например, определить переменную, привязать ее к свойству недопустимой формы и управлять поведением на основе значения этой переменной2. вызов функции в ngIf может иметь проблемы с производительностью
Ответ №1:
Однако вы хотите «выделить» рейтинг, если он не выбран, вы можете сделать это, проверив действительность formcontrol. setRating функция, по моему предположению, задает значение для formcontrol. Итак, вы хотите отобразить сообщение, если оно не выбрано, ну, тогда просто проверьте, если
form.get('rating').value gt; 0 …и любые другие проверки, которые вы, возможно, захотите выполнить, например, была ли отправлена форма?
Хотите прикрепить класс к полю, если он недействителен, ну, тогда вы могли бы использовать что-то вроде:
[ngClass]="form.get('rating').value gt; 0 ? 'valid': 'not-valid'" Я вижу, что вы используете угловой материал, поэтому, возможно, вам захочется поработать с условиями, если вы используете настройки углового материала по умолчанию по умолчанию для отображения сообщений об ошибках. Но с проверкой правильности поля формы вы можете применять стили и т. Д., Чтобы имитировать «нормальное» поведение материала.