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

Question

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

现在我要设计一个输入，就像图像中一样

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

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

为此使用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>

Answer 2

您可以这样使用

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

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