在浏览器存储凭据时禁用角度登录按钮

Question

我有一个问题在我的角度申请。我用的是棱角材料。当浏览器存储我的登录凭据时，我填写了登录表单，但该按钮被禁用。下面禁用按钮的图像是我的html代码：

login.component.html

<form class="z-depth center" flex="50" style="text-align: left;" *ngIf="currentUser == null || (currentUser != null && currentUser.LockoutEnabled===true)" class="example-form" [formGroup]="signin" (ngSubmit)="login(signin)" flex="50">
            <table style='margin: auto auto auto auto; width: 50%;'>
                <tr>
                    <div style="border: 1px solid black; border-radius: 5px;">
                        <td>
                            <mat-form-field class="dp" style="height: 55px; padding-top: 5px;">
                                <input #inputEmail matInput class="dp" placeholder="Username" ngDefaultControl formControlName="email" autofocus>
                            </mat-form-field>
                        </td>
                        <td class="inputIcon" style="width: 5%;">
                            <i class="fas fa-user" style="font-size: 20px;"></i>
                        </td>
                    </div>
                </tr>
                <tr>
                    <div style="border: 1px solid black; border-radius: 5px; margin-top: 40px;">
                        <td>
                            <mat-form-field class="dp" style="height: 55px; padding-top: 5px;">
                                <input #inputPassword matInput class="dp" placeholder="Password" [type]="hide ? 'password' : 'text'" ngDefaultControl formControlName="password" required>
                            </mat-form-field>
                        </td>
                        <td style="vertical-align: middle;">
                            <i *ngIf="hide" class="fas fa-eye-slash" style="font-size: 18px; cursor: pointer;" (click)="hide = !hide"></i>
                            <i *ngIf="!hide" class="fas fa-eye" style="font-size: 18px; cursor: pointer;" (click)="hide = !hide"></i>
                        </td>
                        <td class="inputIcon" style="width: 5%;">
                            <i class="fas fa-lock" style="font-size: 20px;"></i>
                        </td>
                    </div>
                </tr>
                <tr>
                    <label id='text' style="text-align: right; display: block; font-size: 13px; margin-top:10px;" (click)="openDialog()">{{ForgotPassword | translate}}</label>
                </tr>
                <tr>
                    <div>
                        <button ejs-button [disabled]="!(signin.valid)" style='width: 250px; margin-top: 30px; font-size: 16px; vertical-align: middle; border-radius: 10px; height: 40px; text-transform: lowercase; text-transform: capitalize;' [ngClass]="{'disabled' : !signin.valid, 'enabled': signin.valid}">{{LoginLabel | translate}}</button>
                    </div>                        
                </tr>
            </table>
        </form>

如果使用浏览器存储的凭据完成表单，我如何修复以使按钮启用？

Answer 1

有一个cdkautofill指令（如果需要，还可以提供autofilmonitor服务）。这是CDK-Docs的一部分。所以在你的两个领域，你可以尝试这样做：

(cdkAutofill)="signin.updateValueAndValidity()"

这将更新表单的有效性状态,然后可能启用该按钮。