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

Question

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

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

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

Stackblitz：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>

任何人都可以帮我解决这个问题。

Answer 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;
}

Z zxswい但是

Answer 2

为此使用Stackblitz

matSuffix

Answer 3

试试这个，如果你需要这样的话

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