选择登录按钮后,必须关闭对话框。我总是有一些错误。例如,单击“登录”按钮时,对话框将关闭,但一切都会变暗。
谁知道如何解决这样的问题,请帮忙。
HTML:
<div class="main-content">
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Authentication
</button>
<button type="submit" class="btn btn-danger pull-right" (click)="logOut()">Close</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form (ngSubmit)="onSignInSubmit()" #f="ngForm" >
<div class="row">
<div class="form-group form-black label-floating is-empty">
<input id="email"
type="email"
required
name='email'
[(ngModel)]="signInUser.email" class="form-control">
<label class="control-label" for="email">Email</label>
</div>
<div class="form-group form-black label-floating is-empty">
<input id="password"
type="password"
required
name='password'
[(ngModel)]="signInUser.password"
class="form-control">
<label class="control-label" for="password">Password</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit"
[disabled]="!(f.valid)"
[ngClass]="{'disabled': !(f.valid)}"
class="btn btn-danger">Login </button>
</div>
</div>
</div>
</div>
打字稿:
export class InfoComponent implements OnInit {
signInUser = {
email: '',
password: ''
};
@Output() onFormResult = new EventEmitter<any>();
constructor(protected authService:AuthService, private router:Router) { }
ngOnInit() {
}
logOut(){
this.authService.logOutUser().subscribe(() => this.router.navigate(['/info']));
}
onSignInSubmit(){
this.authService.logInUser(this.signInUser).subscribe(
res => {
if(res.status == 200){
// loginForm.resetForm();
this.onFormResult.emit({signedIn: true, res});
this.router.navigate(['/profile']); }
},
err => {
console.log('err:', err);
// loginForm.resetForm();
this.onFormResult.emit({signedIn: false, err});
})
}
}
P.S。我为我糟糕的英语道歉。
答案 0 :(得分:1)
我使用的是Ngbmodal,这是一个简单的例子,我希望这会有所帮助:
您组件中的:
constructor(private modalService: NgbModal) { }
open(content, size?) {
let promise = new Promise((resolve) => {
size = size || 'lg';
this.modalService.open(content, { size: size }).result.then((result) => {
if (!['cancel', 'close'].includes(result)) {
resolve(result);
}
}, (reason) => {
// TODO: implement on close by another reasons
});
});
return promise;
}
在html中:
<ng-template #sampleModal let-c="close" let-d="dismiss">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark btn-block" (click)="c('close')">Cancel</button>
</div>
</ng-template>
答案 1 :(得分:0)
假设您已经包含了jquery。
在顶部
declare $ :any;
onSignInSubmit(){
$('#exampleModal').modal('hide'); ....
我希望这会有所帮助。随意评论。