对于Angular材质，是否禁用输入的自动填充或自动完成建议？

Question

我只是使用像这样的简单输入容器

<mat-form-field >
                    <input matInput placeholder=" Old Password"  autocomplete ="off" formControlName="OldPassword" [type]="hideOldPassword ? 'password' : 'text'" >

<button mat-icon-button matSuffix (click)="hideOldPassword = !hideOldPassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hideOldPassword">
<mat-icon>{{hideOldPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<mat-hint align="end">Enter the Old Password</mat-hint>
<mat-error *ngIf="hasError('OldPassword', 'required')">OldPassword is required</mat-error>
</mat-form-field>

我需要已经保存的密码不显示在输入字段中。我正在使用autocomplete =“ off”和autocomplete =“ false”。但未禁用。 请提出任何答案

Answer 1

从V34开始，Chrome不支持autocomplete="off"。 相反，您应该使用autocomplete="new-password"。 对于mozilla，我不确定。您可以参考文档。

<mat-form-field >
<input matInput placeholder=" Old Password"  autocomplete ="new-password"  formControlName="OldPassword" [type]="hideOldPassword ? 'password' : 'text'" >

有关更多详细信息，请参阅此link。

Answer 2

好的，所以在尝试了上述所有选项并且无法清除讨厌的自动填充表单后，我决定跳出框框思考并提出另一个选项。所以这就是我所做的并且它奏效了：

import {Component, OnInit, AfterViewChecked} from '@angular/core';

...

export class RegisterComponent implements OnInit, AfterViewChecked {

    registration = new FormGroup({
        email: new FormControl(''),
        password: new FormControl('')
    });

    ngAfterViewChecked(): void {
        // email needs to be replaced to whatever field you want cleared
        this.registration.controls.email.setValue('');
    }

}

如果你想清除整个表格，你可以这样做：

ngAfterViewChecked(): void {
    this.registration.reset();
}

如果您有任何问题，请告诉我:)

Answer 3

对于角度

<input [(ngModal)]="password" name="password" [attr.type]="password.length < 1 ? 'text': 'password'" />

不要使用输入类型属性。

---

输入类型很重要。 [密码]

不仅是chrome，所有浏览器都会根据输入类型提示密码建议

当它检测到 <input id="passId" type="password"/>

**它将 100% 工作并且对我来说完美无缺 **

删除type="password"

很重要