浏览器自动填充不适用于材质对话框

Question

我正在尝试让浏览器自动填充我的材料对话框表单之一。但我面临着问题。尝试了多种方法来显示自动填充，但它不可见。

下面是我的对话框中的 html 代码

<div id="manageFTPUsersAddEditModal">
    <div class="modal-header">
       <h4>Manage FTP User</h4>
    </div>
   <div class="row">
    <div *ngIf="showMessage" class="{{messageClass}}">
        {{message}}
        <a href="#" class="close-button" (click)="hideMessage($event)">&times;</a>
    </div>
</div>
<form name="ftpUsersAddEditForm" #ftpUsersAddEditForm="ngForm" autocomplete="on">

    <div class="row">
        <div class="small-4 columns">
            <label class="middle">Friendly Name</label>
        </div>
        <div class="small-8 columns">
            <input id="ftpUserFriendlyName" name="friendlyName" type="text" [(ngModel)]="selectedUser.Ftpuserfriendlyname!.friendlyname" 
                autocomplete
            />
            <!-- <input type="text" id="txtUserName" name="friendlyName"
                [(ngModel)]="selectedUser.Ftpuserfriendlyname!.friendlyname" autocomplete="true"/> -->
        </div>
    </div>
    <div class="row">
        <div class="small-4 columns">
            <label class="middle">User Name</label>
        </div>
        <div class="small-8 columns">
            <input type="text" id="ftpUserName" name="username"
                [(ngModel)]="selectedUser.username" [required]="required" autocomplete="username"/>
        </div>
    </div>
    <div class="row">
        <div class="small-4 columns">
            <label class="middle">Password</label>
        </div>
        <div class="small-8 columns">
            <input type="text" id="ftpUsertxtPassword" name="password"
                [(ngModel)]="selectedUser.password" [required]="Passwordrequired"/>
        </div>
    </div>
    <div class="row">
        <div class="small-4 columns">
            <label class="middle">Home Directory</label>
        </div>
        <div class="small-1 columns">
            <label class="prefix middle">/data/</label>
        </div>
        <div class="small-7 columns">
            <input type="text" id="ftpUsertxtHomedir" name="homeDirectory"
                [(ngModel)]="selectedUser.homedirectory" autocomplete="homeDirectory"/>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="button" (click)="saveUser($event)">Save</a>
        <a href="#" class="button secondary" (click)="closeManageUserModal($event)">Cancel</a>
    </div>
</form>
<button class="close-button" (click)="closeManageUserModal($event)" type="button">
    <span><i class="ico-times"></i></span>
</button>

请帮助我了解我做错了什么或如何在对话框中初始化自动填充

Answer 1

您需要提供一个浏览器能够识别的自动完成名称，只有这样自动完成才会起作用！

首先进入 Chrome -> 设置 -> 自动填充及更多 -> 地址 -> 然后添加地址

添加地址后，为自动填充提供熟悉的名称，例如

autocomplete="name"

和

autocomplete="username"

之后它就可以在 Chrome 中为我工作了！

堆栈闪电战