在角/材料定型垫形式的场的输入

Question

我有，我想添加自定义样式输入垫表单域，但是我无法找到的官方角度材质网站上关于此的任何文件。

我的最终目标是：

• 选择输入框后更改下划线颜色
• 去除浮标签（如果可能的话 - 我知道这是一个功能，但现在已经过时）。

我不是最擅长用角，只是还没有，但如果事情需要改变JS，那么我可以随时给我最好的拍摄。

我只是需要一些指导。

目前代码：

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

目前CSS：

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}

Answer 1

从我的理解，这两个特征似乎是在MatFormField。

1. floatPlaceholder已过时，因为现在它的[floatLabel]为FloatLabelType（'never', 'always', 'auto'），使用输入施加
2. 你可以改变输入[color]下划线的颜色，但你只能从你的主题（'primary', 'accent', 'warn'）选择颜色。欲了解更多有关如何设置主题去their website here，

<form class="search-form">
  <mat-form-field class="example-full-width"
                  floatLabel="never" color="primary">
    <input class="toolbar-search" type="text" matInput placeholder="search">
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

Answer 2

为了改变风格与SCSS物质投入：

标准：

::ng-deep .mat-form-field {
    .mat-input-element {
        color: slategray;
    }
    .mat-form-field-label {
        color: slategray;
    }
    .mat-form-field-underline {
        background-color: slategray;
    }
    .mat-form-field-ripple {
        background-color: slategray;
    }
    .mat-form-field-required-marker {
        color: slategray;
    }
}

聚焦：（当被选择时）

::ng-deep .mat-form-field.mat-focused {
    .mat-form-field-label {
        color: #ff884d;
    }
    .mat-form-field-ripple {
        background-color: #ff884d;
    }
    .mat-form-field-required-marker {
        color: #ff884d;
    }
    .mat-input-element {
        color: #ff884d;
    }
}

无效：

::ng-deep .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
        color: #ff33cc;
    }
    .mat-form-field-label {
        color: #ff33cc;
        .mat-form-field-required-marker {
            color: #ff33cc;
        }
    }
    .mat-form-field-ripple {
        background-color: #ff33cc;
    }
}

DEMO

你也可以使用ViewEncapsulation.None以避免它被废弃::ng-deep：

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

Answer 3

您可以使用您在下面使用的CSS选择器：

/deep/ .mat-input-underline {
   background-color: white;
}

该/深/组合子被提名为在角弃用，所以最好不用它做的事。不幸的是，从角材料.MAT输入下划线是高规格，这使得它很难不使用覆盖/深/

我发现，最好的方法是使用一个ID，它允许你比默认的角度材质款式较高的特异性。

 <form id="search-form" [formGroup]="form" (ngSubmit)="submit()">
    <mat-form-field>
      <mat-placeholder class="placeholder">Search</mat-placeholder>
      <input type="text" class="toolbar-search" matInput formControlName="search">
      <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>

然后，你的搜索形式的'身份证可用于对象的输入。您无法定位在component.scss垫表单字段下划线而不破坏你的看法封装。这是容易做到在全球范围内，通过添加以下内容到global.scss

global.scss：

#search-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
  .placeholder {
    display: none;
  }
}

我希望角材质队拉回到他们对未来的特殊性，因为目前有以覆盖其默认值没有简单的方法。