[英]Modal close and form value reset not working in Angular
与许多与我的问题相关的现有问题交叉,我发布了这个。 所以不要将此评论为重复并发送重复的答案我的情况有点不同。 所有解决方案都与 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>
Log-Reg.component.ts
@ViewChild('loginForm') public userLoginForm : NgForm;
onLogin(){
//some function for login validation\
this.userLoginForm.reset();
}
尝试这个。
this.userLoginForm.form.reset()
或者
this.userLoginForm.resetForm()
根据您的评论,我假设您无法在登录后关闭模态,
您没有在组件中导入 Modal 指令
模态模板 .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()
}
希望这能解决你的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.