如何在 Angular 5 中自定义 Angular 材料设计输入字段答案

【问题标题】：How to customize Angular material design input field in Angular 5如何在 Angular 5 中自定义 Angular 材料设计输入字段
【发布时间】：2018-08-30 09:01:17
【问题描述】：

我正在使用 Angular 5 应用程序，这里我使用 Angular Material Design for UI。

现在我想设计一个像图像中一样的输入文件

我不知道如何在他的输入字段中添加“更改”标签。

堆栈闪电战：https://stackblitz.com/edit/angular-stacb4-5oaagd?file=app%2Fsnack-bar-overview-example.html

app.component.html

<mat-form-field class="col-sm-12">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="email" required>
</mat-form-field>

谁能帮我解决这个问题。

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

你可以这样使用，

<mat-form-field class="col-sm-12">
    <mat-label>Enter your email</mat-label>
    <input #inp matInput placeholder="email" required>
   <span matSuffix class="lbl" (click)="inp.value = ''">change</span>
</mat-form-field>

在style.css

.lbl {
   color: #1787dc;
   cursor: pointer;
}

Stackblitz演示

【讨论】：

【解决方案2】：

为此使用matSuffix

<mat-form-field class="col-sm-12">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="email" required>
  <button matSuffix (click)="getData()">Change</button>
</mat-form-field>

【讨论】：

【解决方案3】：

如果你需要这样的东西，试试这个

<mat-form-field class="col-sm-12">
    <mat-label matSuffix >Enter your email</mat-label>
  <a matSuffix > change ? </a>
    <input matInput placeholder="email" required>
</mat-form-field>

【讨论】：