有时，浏览器为输入提供自动填充.本地输入字段有一个属性autocomplete="off".然而，我有来自taiga UI库的输入字段:
<tui-input
formControlName="title"
[tuiTextfieldCleaner]="true"
[tuiTextfieldLabelOutside]="true"
[tuiTextfieldSize]="'m'"
>
enter text
</tui-input>
autocomplete="off"属性不适用于tui-input.请帮助我取消tui-input的自动填充.
我try 使用autocomplete="off"作为家长div.但这不起作用，我需要决定，即tui-input
创建自定义指令来处理此场景.
自动完成指令:
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[autoComplete]',
})
export class AutoCompleteDirective {
@Input() autoComplete = 'off';
constructor(private elementRef: ElementRef) {}
ngAfterViewInit() {
const input = this.elementRef.nativeElement.querySelector('input');
input.setAttribute('autocomplete', this.autoComplete);
}
}
HTML
<tui-root>
<form class="b-form" [formGroup]="testForm">
<tui-input
autoComplete="off"
formControlName="testValue"
[tuiTextfieldCleaner]="true"
[tuiTextfieldLabelOutside]="true"
[tuiTextfieldSize]="'m'"
>
enter text
</tui-input>
</form>
</tui-root>
选项2定义tui-input内的输入，自动完成设置为off
<tui-input formControlName="testValue2">
Type an email
<input tuiTextfield type="email" autocomplete="off" />
</tui-input>