Topic: LoginModal is not displaying properly when opening dynamically from another component and not hiding on hide()
I am using ReactiveForm Module of Angular .
![export class HeaderComponent implements OnInit { modalRef: MDBModalRef;][1]
@ViewChild('loginModal', {static: false}) loginRegisterModal: LoginComponent;
constructor(private modalService: MDBModalService) { }
ngOnInit() {
}
openLoginModal() { this.modalRef = this.modalService.show(LoginComponent); }
}
export class LoginComponent implements OnInit {
@ViewChild('loginModal', { static: false }) loginModal: ModalDirective;
this.loginService.singnup(user)
.pipe(first())
.subscribe(
newUser => {
this.loginModal.hide();
this.alertService.success('Registration successful', true);
this.router.navigate(['/user']);
},
error => {
this.alertService.error(error);
this.loading = false;
});
}
<div mdbModal #loginModal="mdbModal" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Tab panels -->
<mdb-tabset #staticTabs [buttonClass]="'nav md-tabs tabs-2 light-blue darken-3'" [contentClass]="''" class="tab-content">
<!--Panel 7-->
<mdb-tab class="tab-pane fade in show active" id="panel7" role="tabpanel" heading="<i class='fas fa-user'></i> Login">
<!--Body-->
<div class="modal-body mb-1">
<form [formGroup]="registerLoginForm" (ngSubmit)="onLoginSubmit()" >
<div class="md-form form-sm">
<mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="text" id="loginemail" class="form-control" formControlName="loginEmail"/>
<label for="loginemail">Your email</label>
<mdb-error *ngIf="loginEmail.invalid && (loginEmail.dirty || loginEmail.touched)">
Input invalid
</mdb-error>
<mdb-success *ngIf="loginEmail.valid && (loginEmail.dirty || loginEmail.touched)">
Input valid
</mdb-success>
</div>
<div class="md-form form-sm">
<mdb-icon fas icon="lock" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="password" id="loginpass" class="form-control" formControlName="loginPassword"/>
<label for="loginpass">Your password</label>
<mdb-error
*ngIf="loginPassword.invalid && (loginPassword.dirty || loginPassword.touched)">
Input invalid
</mdb-error>
<mdb-success *ngIf="loginPassword.valid && (loginPassword.dirty || loginPassword.touched)">
Input valid
</mdb-success>
</div>
<div class="text-center mt-2">
<button type="submit" mdbBtn color="info" class="waves-light" mdbWavesEffect>
Log in
<mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
</button>
</div>
<!-- Social login -->
<div class="text-center pt-3">
<p >or sign in with:</p>
<a type="button" href="javascript:void(0)" (click)="facebookLogin()" mdbBtn floating="true" color="fb" size="sm">
<mdb-icon fab icon="facebook"></mdb-icon>
</a>
<a type="button" href="javascript:void(0)" (click)="googleLogin()" mdbBtn floating="true" color="gplus" size="sm">
<mdb-icon fab icon="google-plus"></mdb-icon>
</a>
<a type="button" href="javascript:void(0)" (click)="githubLogin()" mdbBtn floating="true" color="git" size="sm">
<mdb-icon fab icon="github"></mdb-icon>
</a>
</div>
</form>
</div>
<!--Footer-->
<div class="modal-footer display-footer">
<div class="options text-center text-md-right mt-1">
<p>
Not a member?
<a href="#" class="blue-text">Sign Up</a>
</p>
<p>
Forgot
<a href="#" class="blue-text">Password?</a>
</p>
</div>
</div>
</mdb-tab>
<!--/.Panel 7-->
<!--Panel 8-->
<mdb-tab class="tab-pane fade" id="panel8" role="tabpanel" heading="<i class='fas fa-user-plus'></i> Register">
<!--Body-->
<div class="modal-body">
<form [formGroup]="registerLoginForm" (ngSubmit)="onRegisterSubmit()">
<div class="md-form form-sm">
<mdb-icon fas icon="user" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="text" id="fname" class="form-control" formControlName="firstName"/>
<label for="fname">First Name</label>
<mdb-error *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)">
Input invalid
</mdb-error>
<mdb-success *ngIf="firstName.valid && (firstName.dirty || firstName.touched)">
Input valid
</mdb-success>
</div>
<div class="md-form form-sm">
<mdb-icon fas icon="user" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="text" id="lname" class="form-control" formControlName="lastName"/>
<label for="lname">Last Name</label>
<mdb-error *ngIf="lastName.invalid && (lastName.dirty || lastName.touched)">
Input invalid
</mdb-error>
<mdb-success *ngIf="lastName.valid && (lastName.dirty || lastName.touched)">
Input valid
</mdb-success>
</div>
<div class="md-form form-sm">
<mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="text" id="regemail" class="form-control" formControlName="registerEmail"/>
<label for="regemail">Your email</label>
<mdb-error *ngIf="registerEmail.invalid && (registerEmail.dirty || registerEmail.touched)">
Input invalid pankaj
</mdb-error>
<mdb-success *ngIf="registerEmail.valid && (registerEmail.dirty || registerEmail.touched)">
Input valid
</mdb-success>
</div>
<div class="md-form form-sm">
<mdb-icon fas icon="lock" class="prefix"></mdb-icon>
<input mdbInput mdbValidate type="password" id="regpass" class="form-control" formControlName="registerPassword"/>
<label for="regpass">Your password</label>
<mdb-error *ngIf="registerPassword.invalid && (registerPassword.dirty || registerPassword.touched)">
Input invalid
</mdb-error>
<mdb-success *ngIf="registerPassword.valid && (registerPassword.dirty || registerPassword.touched)">
Input valid
</mdb-success>
</div>
<div class="text-center form-sm mt-2">
<button type="submit" mdbBtn color="info" class="waves-light" mdbWavesEffect>
Sign up
<mdb-icon fas icon="sign-in-alt" class="ml-1"></mdb-icon>
</button>
</div>
<!-- Social login -->
<div class="text-center pt-3">
<p >or sign in with:</p>
<a type="button" href="javascript:void(0)" (click)="facebookLogin()" mdbBtn floating="true" color="fb" size="sm">
<mdb-icon fab icon="facebook"></mdb-icon>
</a>
<a type="button" href="javascript:void(0)" (click)="googleLogin()" mdbBtn floating="true" color="gplus" size="sm">
<mdb-icon fab icon="google-plus"></mdb-icon>
</a>
<a type="button" href="javascript:void(0)" (click)="githubLogin()" mdbBtn floating="true" color="git" size="sm">
<mdb-icon fab icon="github"></mdb-icon>
</a>
</div>
</form>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-center">
<p class="pt-1">
Already have an account?
<a href="#" class="blue-text">Log In</a>
</p>
</div>
</div>
</mdb-tab>
<!--/.Panel 8-->
</mdb-tabset>
</div>
</div>
<!--/.Content-->
</div>
</div>
Dear @Pankaj charpe
To customize your modal, using the code for static modals, you have to add classes from the element with
mdbModaldirective to thecontainerClassparameter and classes frommodal-dialogto theclassparameter, ex. :this.modalRef = this.modalService.show(LoginComponent, { class: 'cascading-modal', containerClass: 'modal fade top' });
Use step 1. and the problem will disappear
You have to inject
modalRefto constructor inlogin.componentTry to add to your styles.scss this code:
.modal-footer { justify-content: center; }
I sent you an email with the fixed application.
Hope it helps!
Best Regards, Bartosz.
Pankaj charpe free commented 6 years ago
Thanks. That was really helpful. All my problems are solved.
Pankaj charpe free commented 6 years ago
Hi, Now, I am facing serious problems. The modal is not scrollable and if I am trying open through route path: localhost/4200/login getting following errors: (Making the modal static causing other issues) core.js:6014 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[LoginComponent -> MDBModalRef]: StaticInjectorError(Platform: core)[LoginComponent -> MDBModalRef]: NullInjectorError: No provider for MDBModalRef! NullInjectorError: StaticInjectorError(AppModule)[LoginComponent -> MDBModalRef]: StaticInjectorError(Platform: core)[LoginComponent -> MDBModalRef]: NullInjectorError: No provider for MDBModalRef!
Pankaj charpe free commented 6 years ago
Well, I am shifted to normal login modal because of the complications. Please address my toast service thread.
Bartosz Termena staff commented 6 years ago
Hi! So is there any problem i could help you with?
Best, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.0
- Device: Desktop
- Browser: Chrome
- OS: windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 6 years ago
Could you provide some screenshots? What is the exact problem with the display of the component?
Pankaj charpe free commented 6 years ago
The image up-loader is giving connection error, So not able to upload the image or URL. Can you please provide me any alternative link or email id to send the screenshots? I am opening this modal component from header component. The header component has two buttons login and register. If i click on any of the buttons, a function in header component execute and opens the loginmodal component. The modal is successfully opening but I am getting following issues: 1. I have to remove "modal fade" from class to make it appear. 2.Bottom of modal is appearing as a overlapping with divider. 3. "hide()" method is not working. It is not hiding the modal. 4. The bottom text like "Not a member? Sign Up" not coming in center even after applying "text-center" class.
Bartosz Termena staff commented 6 years ago
Hi!
Could you send demo app with existing problem to my email? - b.termena@mdbootstrap.com
Best Regards, Bartosz.
Pankaj charpe free commented 6 years ago
Hi! I have sent a mail with demo app, please check.