javascript - Angular 5 表单提交，奇怪的行为

问题描述

我在使用 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 按钮时，它会停止我的应用程序。

知道可能导致此问题的原因吗？

标签： javascripthtmlangulartypescript

javascript - Angular 5 表单提交，奇怪的行为

问题描述

解决方案

推荐阅读