如何在 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 }}" …>

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