1

与许多与我的问题相关的现有问题交叉，我发布了这个。所以不要将此评论为重复并发送重复的答案，我的情况有点不同。所有解决方案都与 javascript 或 jquery 有关。但我想在 Angular 中。

我正在使用mdBootstrap，只提供 index.html 中的 CDN 链接，而不是安装它。我有一个带有登录和注册选项卡的弹出窗口。问题是在输入凭据并单击登录模式后未关闭（我不想放置 data-dismiss="modal"），因为它在不执行登录功能的情况下关闭了模式。我希望完成这两个功能，验证凭据是否无效，我希望模式处于打开状态，说错误消息。如果它是有效的，那么只有模态被关闭。

第二件事我想重置模态表单值，即使我单击模态外部的任何位置并重新打开模态也是如此。例如，如果我有两个输入字段，如用户名和密码，我只输入了用户名，将密码留空，然后单击外部并重新打开模式，我的模式以输入的用户名值打开。我想摆脱这些问题。

任何人都可以帮助我解决这些问题。提前致谢。

日志-Reg.component.html

<div class="modal fade" id="modalLoginRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        //tabs for login & Register
        <div class="tab-content py-0">
          <div class="tab-pane fade in show active" id="modalLoginTab" role="tabpanel">
            <form #loginForm="ngForm">
              <div class="md-form">
                <input required [(ngModel)]="username" type="email" id="loginEmail" name="Username" class="form-control validate">
                <label for="loginEmail">Enter your email address</label>
              </div>
              <div class="md-form">
                <input required [(ngModel)]="password" type="password" id="loginPassword" name="Password" class="form-control validate">
                <label for="loginPassword">Enter your password</label>
              </div>
              <div *ngIf="isLoginError" class="alert alert-danger">Incorrect Credentials</div>
              <button type="button" [disabled]=!loginForm.valid class="btn btn-primary" (click)="onLogin()">Login</button>
            </form>
          </div>
          //Form for Register
        </div>
      </div>
    </div>
  </div>
</div>

日志-Reg.component.ts

@ViewChild('loginForm') public userLoginForm : NgForm;

onLogin(){
//some function for login validation\
this.userLoginForm.reset();
}
4

2 回答 2

0

尝试这个。

this.userLoginForm.form.reset()

或者

this.userLoginForm.resetForm()
于 2018-08-29T06:00:17.700 回答
0

从您的评论中，我假设您无法在登录后关闭模式，

您没有在组件中导入模态指令

模态模板 .html 文件

 <div mdbModal #loginModal="mdbModal" class="modal fade" id="modalLoginRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        //tabs for login & Register
        <div class="tab-content py-0">
          <div class="tab-pane fade in show active" id="modalLoginTab" role="tabpanel">
            <form #loginForm="ngForm">
              <div class="md-form">
                <input required [(ngModel)]="username" type="email" id="loginEmail" name="Username" class="form-control validate">
                <label for="loginEmail">Enter your email address</label>
              </div>
              <div class="md-form">
                <input required [(ngModel)]="password" type="password" id="loginPassword" name="Password" class="form-control validate">
                <label for="loginPassword">Enter your password</label>
              </div>
              <div *ngIf="isLoginError" class="alert alert-danger">Incorrect Credentials</div>
              <button type="button" [disabled]=!loginForm.valid class="btn btn-primary" (click)="onLogin()">Login</button>
            </form>
          </div>
          //Form for Register
        </div>
      </div>
    </div>
  </div>
</div>

在您的组件文件（appcomponent.ts）中试试这个

import { ModalDirective } from 'ng-mdb-pro/free/modals/modal.directive';

    @ViewChild('loginModal') _loginModal: ModalDirective;

    onLogin(){
    *add your login logic in your success add the below code*
    this._loginModal.hide()
    }

希望这能解决你的问题

于 2018-08-29T08:07:54.127 回答