Topic: LoginModal is not displaying properly when opening dynamically from another component and not hiding on hide()

Pankaj charpe free asked 4 years ago


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>

Arkadiusz Idzikowski staff commented 4 years ago

Could you provide some screenshots? What is the exact problem with the display of the component?


Pankaj charpe free commented 4 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 4 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 4 years ago

Hi! I have sent a mail with demo app, please check.


Bartosz Termena staff answered 4 years ago


Dear @Pankaj charpe

  1. To customize your modal, using the code for static modals, you have to add classes from the element with mdbModal directive to the containerClass parameter and classes from modal-dialog to the class parameter, ex. :

    this.modalRef = this.modalService.show(LoginComponent, { class: 'cascading-modal', containerClass: 'modal fade top' });

  2. Use step 1. and the problem will disappear

  3. You have to inject modalRef to constructor in login.component

  4. Try 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 4 years ago

Thanks. That was really helpful. All my problems are solved.


Pankaj charpe free commented 4 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 4 years ago

Well, I am shifted to normal login modal because of the complications. Please address my toast service thread.


Bartosz Termena staff commented 4 years ago

Hi! So is there any problem i could help you with?

Best, Bartosz.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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