angular - 登录表单成功时隐藏模式
问题描述
如果我的登录成功,我只是试图关闭模式。
当我在代码中的任何位置添加 basicModal.hide() 方法时,登录按钮就会消失。
HTML:
<!-- loginModal -->
<div class="container">
<div class="modal fade" id="loginModalCenter" #loginModalCenter tabindex="-1" role="form" aria-labelledby="ModalCenterTitle"
aria-hidden="true">
....
<!-- Sign in button -->
<button class="btn btn-success btn-block my-4" type="submit">Login</button>
<!-- form login -->
TS:……
this.loading = true;
this.authenticationService
.login(this.f.email.value, this.f.password.value, result => {
if (result) {
console.log('Logged in ' + result);
this.loginModalCenter.hide();
} else {
console.log('not a valid user');
}
});
}
}
解决方案
You can use a boolean to do so. Set a bool loggedIn = true on your class, then set a *ngIf="!loggedIn" on your loginModalCenter.
Finally simply set loggedIn to true on login function result.
So TS:
//before constructor()
loggedIn: boolean = false;
//On login
this.authenticationService
.login(this.f.email.value, this.f.password.value, result => {
if (result) {
console.log('Logged in ' + result);
this.loginModalCenter.hide();
this.loggedIn = true;
}
And on template:
<div class="modal fade" *ngIf="!loggedIn" id="loginModalCenter" #loginModalCenter tabindex="-1" role="form" aria-labelledby="ModalCenterTitle"
aria-hidden="true">
Hope that helps !
推荐阅读
- php - 用于原始 SQL 查询的等效 Laravel Eloquent
- reactjs - 如何使用 React Fusion Charts 修复漏斗图的 ChunkLoadError?
- r - R Shiny 中基于动态组的过滤 - 通过标签复制搜索
- memory-address - 如果您在哪里重新排列内存地址缓存位分配,有什么区别吗?
- accessibility - 使用占位符作为标签是否符合 WCAG 2?
- progressive-web-apps - PWA 如何与 Back4app 配合使用
- c# - Skiasharp 中的 Jpeg To WebP 编码在 Android 上产生灰度结果
- python - 按几个时间段过滤熊猫数据框?
- java - 如何从我的 Android 应用程序中的 Java 代码在我的布局上添加 NumberPicker?
- python - 在 NetworkX 中生成邻接表 - 如何包含先前的节点?