Как скрыть/удалить подчеркнутый ввод Angular Материал?

Ответ 1

Update:

Импорт MdInputDirective

import {MdInputDirective} from '@angular/material';

В compoent выполните следующие действия:

@ViewChild('input') input: MdInputDirective;

ngOnInit(){
  this.input.underlineRef.nativeElement.className = null;
}

В html добавьте ссылку #input:

<md-input-container #input>
  <input  mdInput placeholder="Last 4 SSN">
</md-input-container>

Демо-версия Plunker

Оригинал:

Попробуйте css:

::ng-deep .mat-input-underline {
    display: none;
}

демонстрация

Ответ 2

Это сработало для меня:

::ng-deep .mat-form-field-underline {
    display: none;
}

Добавьте его в компонент scss или css

Ответ 3

Другие ответы не спомогли мне, но это сработало:

md-input-container input {
        border: none;
}

Ответ 4

::ng-deep .mat-form-field-underline {
  display: none;
}

Ответ 5

This worked for me

.mat-form-field-appearance-legacy .mat-form-field-underline {
    height: 0 !important;
}

Ответ 6

Если вы используете mat-form-field вместо md-input-container и google-landed здесь, вот ваши два варианта.

1. Просто закомментируйте поле mat-form-field и используйте ваши собственные стили.
2. Смотрите другие параметры внешнего вида, доступные для mat-form-field в документации.

Ответ 7

Для меня это работало без ::ng-deep. Используя Angular 6.1.10 следующим образом:

<form>
  <mat-form-field class="no-line">
    <input type="text"
                  matInput
                  field="label"
                  [matAutocomplete]="auto"
                  [formControl]="formControl"/>
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{ food.label}}
        </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

.no-line .mat-form-field-underline {
  display: none;
}

Ответ 8

Я немного поиграл со свойством appearance вида mat-form-field и обнаружил, что если вы введете значение "none" (или любое другое неподдерживаемое значение), вы получите четкий ввод.

Код:

  <mat-form-field appearance="none">
    <mat-label>"None" form field</mat-label>
    <input matInput placeholder="Placeholder">
  </mat-form-field>

StackBlitz demo (отредактировано из официального углового демо).

Оригинальный пример можно найти здесь: варианты внешнего вида поля формы.

Я признаю, это немного взломать.