Question

我正在用角度创建登录/注册表单。我也在使用Xtreme Admin Angular模板。我使用了选项卡组件HTML，并在一个选项卡中设置了登录表单，在另一个选项卡中设置了注册表单。页面加载后，我可以在登录和注册之间完美切换。但是，当我在登录表单中输入无效的凭据时，请切换到“注册”选项卡并返回登录表单；注册选项卡的内容将显示在登录选项卡的内容下方。

我尝试抓住不同的标签组件，以查看是否设置了错误的HTML。我还尝试使用选项卡内的默认“注册”（注册）表格，但该表格仍然存在相同的错误。

在输入错误的凭据后，这是下面的样子：转到注册选项卡，然后返回登录选项卡：

这是我的HTML：

<div class="auth-wrapper d-flex no-block justify-content-center align-items-center" style="background:url(assets/images/big/auth-bg.jpg) no-repeat center center;">
    <div class="auth-box">
        <div id="loginform" [ngClass]="{'d-none': recoverform}">
            <div class="logo">
                <h5 class="font-medium m-b-20">Sign In to Admin</h5>
            </div>
                <ngb-tabset>
                  <ngb-tab title="Login">
                    <ng-template ngbTabContent> 
                            <div class="row">
                                    <div class="col-12">
                                        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
                                                <div class="form-group">
                                                    <label for="username">Username</label>
                                                    <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                                                    <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                                                        <div *ngIf="f.username.errors.required">Username is required</div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="password">Password</label>
                                                    <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                                                    <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                                                        <div *ngIf="f.password.errors.required">Password is required</div>
                                                    </div>
                                                </div>

                                                <div class="form-group form-inline">
                                                    <button [disabled]="loading" class="btn btn-success btn-lg btn-block">Login</button>
                                                    <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />

                                                </div>
                                                <div *ngIf="error" class="alert alert-danger">{{error.error.message}}</div>
                                        </form>
                               </div>
                        </div>
                    </ng-template>
                  </ngb-tab>
                  <ngb-tab>
                    <ng-template ngbTabTitle><b>Registration</b></ng-template>
                    <ng-template ngbTabContent>

                                        <!-- Form -->
                                        <div class="row">
                                            <div class="col-12">
                                                <form class="form-horizontal m-t-20" action="index.html">
                                                    <div class="form-group row ">
                                                        <div class="col-12 ">                                                            
                                                            <label for="username">Name</label>
                                                            <input type="text" formControlName="name" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                                                            <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                                                                <div *ngIf="f.username.errors.required">Name is required</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-12 ">                                                           
                                                            <label for="email">Email</label>
                                                            <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                                                            <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                                                                <div *ngIf="f.username.errors.required">Email is required</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-12 ">
                                                            <label for="password">Password</label>
                                                            <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                                                            <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                                                                <div *ngIf="f.username.errors.required">Password is required</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-12 ">                                                            
                                                            <label for="password-confirm">Confirm Password</label>
                                                            <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                                                            <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                                                                <div *ngIf="f.username.errors.required">Password does not match</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-md-12 ">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="customCheck1">
                                                                <label class="custom-control-label" for="customCheck1">I agree to all <a href="javascript:void(0)">Terms</a></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group text-center "> 
                                                        <div class="col-xs-12 p-b-20 ">
                                                            <button class="btn btn-block btn-lg btn-info " type="submit ">Sign Up</button>
                                                        </div>
                                                    </div>
                                                    <div class="form-group m-b-0 m-t-10 ">
                                                        <div class="col-sm-12 text-center ">
                                                            Already have an account? <a href="#/authentication/login " class="text-info m-l-5 "><b>Sign In</b></a>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                    </ng-template>
                  </ngb-tab>
                </ngb-tabset>
                </div>
        </div>
</div>

如果错误似乎不是HTML引起的，那么如果您想查看我的登录组件的打字稿代码，请告诉我。

Angular Xtreme模板选项卡的错误：来自第二个选项卡的内容出现在第一个选项卡下

0 个答案: