Angular 5 表单提交，奇怪的行为答案

【问题标题】：Angular 5 Form Submit, Wierd behaviourAngular 5 表单提交，奇怪的行为
【发布时间】：2018-09-07 20:41:47
【问题描述】：

我对 Angular 的提交有疑问：我的表单如下所示：

<mat-sidenav-container>

    <div fxLayout="row" fxLayoutAlign="center center" class="h-100">

        <form [formGroup]="form" (ngSubmit)="submitForm(form.value)" fxFlex="80" fxFlex.gt-sm="30" fxFlex.sm="60">

            <mat-card class="p-0 mat-elevation-z12 box">
                <div fxLayout="column" fxLayoutAlign="center center" class="bg-primary box-header">
                    <p>Portal</p>
                </div>
                <mat-card-content fxLayout="column" fxLayoutAlign="end center" class="box-content">
                    <mat-card fxLayout="column" fxLayoutAlign="center center" class="mat-elevation-z12 box-content-inner">
                        <span class="box-content-header">Member login</span>
                        <mat-form-field class="w-100">
                            <input matInput placeholder="Username" id="login-username" [attr.disabled]="!loggedIn"
                                formControlName="username">
                            <mat-error *ngIf="form.controls.username.errors?.required">Username is required</mat-error>
                        </mat-form-field>
                        <mat-form-field class="w-100">
                            <input type="password" matInput placeholder="Password" id="login-password" [attr.disabled]="!loggedIn"
                                formControlName="password">
                            <mat-error *ngIf="form.controls.password.errors?.required">Password is required</mat-error>
                        </mat-form-field>
                        <mat-form-field class="w-100" *ngIf="loggedIn">
                            <mat-select (change)="onChange($event)" placeholder="Select a role" id="login-role"
                                formControlName="role" required>
                                <mat-option *ngFor="let role of rolesTemp" [value]="role">{{role}}</mat-option>
                            </mat-select>
                        </mat-form-field>
                    </mat-card>
                    <div class="w-100" fxLayoutAlign="center center" *ngIf="!loggedIn; else isLoggedIn">
                        <button *ngIf="!loggedIn" mat-raised-button color="primary" class="mat-elevation-z12 box-button" type="submit" >Authenticate</button>
                    </div>

                    <ng-template #isLoggedIn>
                        <button [disabled]=loginDisabled mat-raised-button color="primary" class="mat-elevation-z12 box-button" type="submit">Log in</button>
                    </ng-template>

                </mat-card-content>
            </mat-card>
        </form>
    </div>
</mat-sidenav-container>

我的 submitForm 方法是这样的：

 public submitForm(values:Object):void {

    if (this.loggedIn && this.form.valid) {
    this.selectedRole = this.form.value.role;
    this.authService.setCurrentRole(this.selectedRole);
    this.loginWithRole(this.selectedUser+":"+this.selectedRole, this.form.value.password);
    }
     else if (this.form.valid) {
      let user = this.form.value.username;
      let pass = this.form.value.password;

      this.settings.loadingSpinner = true; 
      this.login(this.form.value.username, this.form.value.password);

       }
  }

其背后的代码执行以下操作：我完成用户名/密码并点击验证。如果用户只有一个角色，登录过程将继续并让用户登录，否则，我会返回此页面并在下拉列表中显示角色，然后让用户选择一个角色，然后登录。

我的问题如下：当我在验证按钮上完成用户名/密码 CLICK 时，一切正常，没有任何错误。但是如果我完成输入然后按 ENTER，我会收到一个错误：

LoginComponent.html:15 ERROR TypeError: Cannot read property 'name' of undefined

我不明白为什么会这样。我的 submitForm 方法中有一个断点，但是当我在表单中按 Enter 时它不会停止我的进程，但是当我点击 Authenticate/Log in 按钮时它会停止我的应用程序。

知道是什么导致了这个问题吗？

【问题讨论】：

这是你登录组件的模板吗？
是的，这是 login.component.html。
你没有 name 属性。你确定这是代码吗？
是的......这是所有的代码，我没有删除任何东西。这就是问题所在，我无法识别该名称的来源，以及为什么它仅在我按 ENTER 时发生，而不是在我单击按钮时发生。
能把提交功能的代码贴出来吗？

标签： javascript html angular typescript

【解决方案1】：

好的，由于某些未知原因，我还没有确定，由于 [attr.disabled] 而发生错误。我删除了它并从代码中禁用了这两个字段，现在它似乎可以正常工作。

我现在假设它的解释方式存在问题，并且在角核心的某个地方存在错误，但这有点超出我的理解。

【讨论】：