Google Chrome 指定一个文本字段作为密码字段

Question

我有一个基本文本字段，但 Google Chrome 将其指定为密码字段。

<form [formGroup]="formBuilder">

  <p>
    <mat-form-field appearance="fill">
      <mat-label>Title</mat-label>
      <input matInput placeholder="Type a title" formControlName="title">
    </mat-form-field>
  </p>

  <p>
    <mat-form-field appearance="fill">
      <mat-label>Description</mat-label>
      <textarea matInput></textarea>
    </mat-form-field>
  </p>

  <p>
    <mat-form-field appearance="fill">
      <mat-label>Label of a detail</mat-label>
      <input matInput type="text"> <!-- THE PROBLEM -->
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Description of a detail</mat-label>
      <input matInput type="text">
    </mat-form-field>
  </p>

</form>

这是我点击该输入字段时的样子：

我在 StackBlitz 上尝试了相同的代码，但它看起来不错，我没有看到那里的问题。

我是运行 localhost:4200 上的那个页面。这个字段怎么是密码字段？？

Answer 1

当我将 ID 添加到输入字段后，我的问题就解决了。

<mat-form-field appearance="fill">
  <mat-label>Label of a detail</mat-label>
  <input id="detail-label" matInput type="text">
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>Description of a detail</mat-label>
  <input id="detail-description" matInput type="text">
</mat-form-field>

Google Chrome 指定一个文本字段作为密码字段

Google Chrome assigns a text field as a password field

html

angular

google-chrome

angular-material