如何在 Angular 9 中的输入字段上强制使用 name 属性？

Question

我正在尝试关闭 Angular 9 应用程序中的自动填充 Chrome 内置功能。我发现 Chrome 将自动填充建议附加到输入字段的名称中。

我有这个 Angular 9 HTML 代码：

<input

  [class]="inputClass"

  [(ngModel)]="model[field]"

  [id]="field"

  [name]="field + '_' + random"

  [placeholder]="getPlaceholder()"

  [disabled]="disabled"

  [type]="type"

  [autocomplete]="random"

  (keyup)="validateField()">

如果我运行应用程序，我会在生成的 HTML 代码中得到以下内容：

<input

  _ngcontent-cbv-c111=""

  class="form-control ng-pristine ng-valid ng-touched"

  ng-reflect-model=""

  id="name"

  ng-reflect-name="name_6xuz5"

  placeholder="My placeholder"

  type="text"

  autocomplete="6xuz5">

现在这里不是标签name上的属性input。那是因为我使用这个语法：[name]="..."。如果我使用该name="..."语法，则会显示名称属性。

如何在字段name上强制使用该属性input并仍然使用[name]="..."语法来给出计算值？

Answer 1

using[name]告诉 Angular 这是一个属性绑定（如输入），但您想要设置一个 HTML attribute。为此，您可以使用<input [attr.name]="field + '_' + random" …>它告诉 Angular 您要将其设置为属性。或者，您也可以使用<input name="{{ field + '_' + random }}" …>但可以说这看起来并不那么漂亮。