I am getting this error
main.d6f3e40c71733c3e7aa5.js:1 ERROR Error: Cannot find control with name: 'email'
Only on chrome. The form is inside an angular material dialog. I use an injected global service to initialize the form, so before I click the button that opens the modal, the form inside the service is already initialized and if I console.log it I can see the control there.
When I open the mat dialog it is using the service to get the fields as follows:
<div [formGroup]="loginService.loginForm" class="registration-type-form-container login-form">
<div
*ngIf="loginService.loginForm.invalid && (loginService.loginForm.dirty || loginService.loginForm.touched) && loginService.loginForm.errors && loginService.loginForm.errors.incorrect"
class="incorrect-email">
{{'login.validation.email-or-pass'|translate}}
</div>
<div class="form-container" fxLayout="column" fxLayoutAlign="center stretch" fxLayoutGap="5px">
<div class="e-mail form-input-container" fxFlex="">
<input [placeholder]="'login.email' | translate" autocomplete="off"
class="email-address form-input" formControlName="email"
id="email" required="required">
<div *ngIf="email.invalid && (email.dirty || email.touched)" class="requirements"
id="login-email">
<div *ngIf="email.errors.required">
{{'login.validation.email.required' | translate}}
</div>
<div *ngIf="email.errors.email">
{{'login.validation.email.email' | translate}}
</div>
</div>
</div>
</div>
The input
<input [placeholder]="'login.email' | translate" autocomplete="off"
class="email-address form-input" formControlName="email"
is the one throwing the error.
If I close the dialog and reopen it, it does not throw the error again. It only happens the first time. And as I said it only happens in chrome. I tested in firefox and it works fine. id="email" required="required">
Seems to be related to chrome version 80.
Look here for fixes: https://github.com/angular/angular/issues/35190