I have a problem in my angular application. I am using angular material. When the browser stores my login credentials, I have the login form filled in but the button is disabled. image with button disabled Below is my html code:
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>
How can I fix so that the button is enabled if form is completed with the credentials stored by the browser?