如何在 Angular 9 中的输入字段中强制输入名称 属性？

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

input 标签上没有 name 属性。那是因为我使用了这个语法：[name]="..."。如果我使用 name="..." 语法，那么将显示名称 属性。

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

Answer 1

使用 [name] 告诉 Angular 这是一个 属性 绑定（就像一个输入），但是你想设置一个 HTML 属性。为此，您可以改用

<input [attr.name]="field + '_' + random" …>

告诉 Angular 你想将它设置为一个属性。

或者，您也可以使用

<input name="{{ field + '_' + random }}" …>

但可以说这看起来并不漂亮。

---

这在 Angular 中有点混乱，并且有计划至少改进文档，see this。