Блог

Я пытаюсь выполнить встроенную функцию редактирования для имени и фамилии в профиле пользователя. Мой макет выглядит так:

Однако, когда я переключаюсь с использования стандартного тега ввода на использование mat-form-field (например, я хотел бы использовать для material), данные пользователя в конечном итоге выглядят так:

Я пытался использовать различные CSS, чтобы попытаться установить это на место, но я не могу вернуть все обратно в строку сведений о пользователе.

Проверяя это в инспекторе, я вижу, что используется класс .mat-form-field-infix, но я не могу переопределить свойства заполнения и верхней границы, которые он содержит. Я не уверен, как подойти к изменению элементов mat-X, поскольку кажется, что материал больше предназначен для сохранения вещей по мере их поступления.

Мне бы понравились некоторые идеи.

HTML

 <div fxLayout="column">
    <div fxLayout="row"><span>{{user?.email}}</span></div>
        <div fxLayout="row">
            <div fxLayoutAlign="space-between">
                <form [formGroup]="formGroup">
                    <mat-form-field>
                        <input matInput
                               formControlName="firstName"
                               value="{{user?.firstName}}"/>
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput
                               formControlName="lastName"
                               value="{{user?.lastName}}"/>
                    </mat-form-field>
                </form>
            </div>
            <div>
                <button *ngIf="!edit" mat-icon-button (click)="editClicked()">
                    <mat-icon matTooltip="Edit User">edit</mat-icon>
                </button>
            </div>
        </div>
    </div>
  

CSS

Вот как удалить заполнение по умолчанию в mat-form-field :

в вашем глобальном styles.css добавьте это правило:

 .mat-form-field-no-padding .mat-form-field-wrapper {
  margin-bottom: -1.25em;
}
  

теперь mat-form-field добавьте этот класс mat-form-field-no-padding