Пропадает звездочка в mat-form-field (required) при очень длинном mat-label

Question

<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>

Answer 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>

Есть еще варианты, как с этим поступать, но все они ведут к тем или иным проблемам, поэтому я остановился на более-менее подходящих. Опять же, самый первый является наиболее правильным.

БЛОГ НА HUSL

Пропадает звездочка в mat-form-field (required) при очень длинном mat-label

Ответы (1 шт):