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

введите сюда описание изображения

2
  • 1
    Можете уточнить свою проблему? Сам mat-label выступает в качестве placeholder и если он не вмещается целиком в input, то логично обрезается и поэтому текст и звездочка остается за его пределами, заменяясь троеточием. Если поле расширить или свободно изменять при mat-form-field { width: 100%; } то это видно. Если же проблема в чем-то другом, то уточните. Как вариант, если нужно всегда иметь в конце звездочку, можно что-то подумать с переносом здездочки в начало или mat-icon с hideRequiredMarker.
    – Alex Krass
    19 мар 2022 в 17:21
  • Да было бы круто что то придумать что бы звездочка была всегда, не взависимости много или мало текста для полей с (required), буду благодарен за подсказку, спасибо!
    – Vladyslav
    22 мар 2022 в 8:06

1 ответ 1

0

Когда мы используем Material Design, мы должны понимать, что это не только графическая библиотека. Это еще и дизайнерский гайдлайн, который говорит что и как надо использовать при проектировании интерфейса. Это накладывает на реализацию свои жесткие ограничения и условия. Что делает порой использование очень неудобным, когда нам нужно сделать шаг влево или шаг вправо от гайдлайна, но мы не хотим лезть глубоко внутрь.

Если мы посмотрим сам гайдлайн https://material.io/components/text-fields, мы увидит такие интересующие нас вещи.

  1. Don't: Label text shouldn't be truncated. Keep it short, clear, and fully visible. (описание поля не должно обрезаться, делайте его коротким, понятным и полностью видимым). То есть нам сразу говорят, что длинный mat-label - это наша ошибка.

  2. Для индикации обязательных полей нужно использовать не только *, но и использовать другие пояснения, поскольку сам * может ничего не говорить про обязательность.

  3. Изучая примеры, мы может найти блоки из которых состоят поля и некоторые примеры решений, который можно использовать.

Какие у нас есть варианты:

  • В разделе 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>
    

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

1
  • Спасибо, полезная инфа!
    – Vladyslav
    23 мар 2022 в 11:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.