<div class="example-container">
<mat-form-field appearance="fill">
<mat-label>Lorem ipsum dolor sit amet, consectetur adipiscing elit</mat-label>
<input matInput placeholder="Something text" [formControl]="about" required>
<mat-error *ngIf="about.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
1 ответ
Когда мы используем Material Design, мы должны понимать, что это не только графическая библиотека. Это еще и дизайнерский гайдлайн, который говорит что и как надо использовать при проектировании интерфейса. Это накладывает на реализацию свои жесткие ограничения и условия. Что делает порой использование очень неудобным, когда нам нужно сделать шаг влево или шаг вправо от гайдлайна, но мы не хотим лезть глубоко внутрь.
Если мы посмотрим сам гайдлайн https://material.io/components/text-fields, мы увидит такие интересующие нас вещи.
Don't: Label text shouldn't be truncated. Keep it short, clear, and fully visible. (описание поля не должно обрезаться, делайте его коротким, понятным и полностью видимым). То есть нам сразу говорят, что длинный mat-label - это наша ошибка.
Для индикации обязательных полей нужно использовать не только *, но и использовать другие пояснения, поскольку сам * может ничего не говорить про обязательность.
Изучая примеры, мы может найти блоки из которых состоят поля и некоторые примеры решений, который можно использовать.
Какие у нас есть варианты:
В разделе Anatomy у нас есть семь элементов у поля и в примерах мы может использовать Helper Text для подсвечивания обязательных или опциональных полей. Это является лучшим решением по гайдлайну.
<mat-form-field appearance="fill"> <mat-label>Lorem ipsum dolor sit amet, consectetur adipiscing elit</mat-label> <input matInput placeholder="Something text" required> <mat-hint>* Required</mat-hint> </mat-form-field>
Мы может использовать суффикс или префикс для таких полей, но возможно придется допиливать стили напильником, чтобы выровнить все элементы.
<mat-form-field appearance="fill" hideRequiredMarker="hideRequiredMarker"> <mat-label>Lorem ipsum dolor sit amet, consectetur adipiscing elit</mat-label> <input matInput placeholder="Something text" required> <span matSuffix>*</span> </mat-form-field>
Отказаться в пользу Label для длинных описаний, но может пострадать внешний вид.
<Label>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Label> <div> <mat-form-field appearance="fill"> <mat-label>Short placeholder</mat-label> <input matInput placeholder="Something text" required> <mat-hint>* Required</mat-hint> </mat-form-field> </div>
Можем попробовать выводить звездочку перед описанием.
.asterix--before:before { content: "* "; } <mat-form-field appearance="fill" hideRequiredMarker="hideRequiredMarker"> <mat-label class="asterix--before">Lorem ipsum dolor sit amet, consectetur adipiscing elit</mat-label> <input matInput placeholder="Something text" required> <mat-hint>* Required</mat-hint> </mat-form-field>
Есть еще варианты, как с этим поступать, но все они ведут к тем или иным проблемам, поэтому я остановился на более-менее подходящих. Опять же, самый первый является наиболее правильным.
mat-form-field { width: 100%; }
то это видно. Если же проблема в чем-то другом, то уточните. Как вариант, если нужно всегда иметь в конце звездочку, можно что-то подумать с переносом здездочки в начало или mat-icon с hideRequiredMarker.