Как я могу принудительно задать свойство name в полях ввода в Angular 9? - PullRequest
Новая
       24

Как я могу принудительно задать свойство name в полях ввода в Angular 9?

0 голосов
/ 11 марта 2020

Я пытаюсь отключить встроенную функцию автозаполнения Chrome в моем приложении Angular 9. Я обнаружил, что 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.

Как можно принудительно установить свойство name в полях input и при этом использовать синтаксис [name]="..." для получения вычисляемого значения

1 Ответ

1 голос
/ 11 марта 2020

Использование [name] говорит Angular, что это привязка свойство (как ввод), но вы хотите установить атрибут HTML . Для этого вы можете вместо этого использовать 

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

, который сообщает Angular, что вы хотите установить его в качестве атрибута.

В качестве альтернативы, вы также можете использовать 

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

но, возможно, это выглядит не очень красиво.

Это немного сбивает с толку в Angular, и есть планы по крайней мере улучшить документацию, см. .

...