找不到带有名称的控件，第一次打开垫子对话框答案

【问题标题】：Cannot find control with name, first time opening mat dialog找不到带有名称的控件，第一次打开垫子对话框
【发布时间】：2020-06-02 10:33:45
【问题描述】：

我收到了这个错误

main.d6f3e40c71733c3e7aa5.js:1 ERROR Error: Cannot find control with name: 'email'

仅在 chrome 上。该表格位于一个角度材料对话框内。我使用注入的全局服务来初始化表单，所以在单击打开模式的按钮之前，服务内的表单已经初始化，如果我 console.log 它我可以在那里看到控件。

当我打开 mat 对话框时，它使用服务来获取如下字段：

            <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>

输入

    <input [placeholder]="'login.email' | translate" autocomplete="off"
                               class="email-address form-input" formControlName="email"

是引发错误的那个。

如果我关闭对话框并重新打开它，它不会再次抛出错误。它只发生在第一次。正如我所说，它只发生在 chrome 中。我在firefox中测试过，效果很好。 id="email" required="required">

【问题讨论】：

检查这个：stackoverflow.com/questions/60221545/…
浏览器似乎没有隐式捕获更改。我可以建议的是您可以使用 ChangeDetectorRef 类并使用 detectChanges()。您可以尝试在为表单设置值的位置进行操作。它将显式强制 Angular 检查更改。希望对您有所帮助。

标签： angular angular-material angular-forms