Angular Bootstrap Modal Form

Angular Bootstrap modal forms are displayed-on-action pop-up forms that used for gathering data from a website visitors and register or log users.

Using them alongside valuable content might bring a lot of business value to your project.

However, you should remember that using them in a spammy manner might have a completely different outcome - drop of UX and frustrating your users.

Examples of Bootstrap modal form use:

  • Email signup
  • Register modal
  • Contact form

If you want to learn about advanced usage of Modals, read our free tutorial Creating Automated web application .

See also: Modal Core Documentation, Modal Styles and Modal Templates.


Simple modal login


<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <i class="fa fa-envelope prefix grey-text"></i>
          <input type="email" id="defaultForm-email" [formControl]="loginFormModalEmail" class="form-control validate" mdbInputDirective>
          <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
        </div>

        <div class="md-form mb-4">
          <i class="fa fa-lock prefix grey-text"></i>
          <input type="password" id="defaultForm-pass" [formControl]="loginFormModalPassword" class="form-control validate" mdbInputDirective>
          <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
        </div>

      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button mdbBtn color="default" class="waves-light" mdbWavesEffect>Login</button>
      </div>
    </div>
  </div>
</div>
	

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    loginFormModalEmail = new FormControl('', Validators.email);
    loginFormModalPassword = new FormControl('', Validators.required);
}
  

Simple modal register


<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <i class="fa fa-user prefix grey-text"></i>
          <input type="text" id="orangeForm-name" class="form-control validate" [formControl]="signupFormModalName" mdbInputDirective>
          <label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
        </div>
        <div class="md-form mb-5">
          <i class="fa fa-envelope prefix grey-text"></i>
          <input type="email" id="orangeForm-email" class="form-control validate" [formControl]="signupFormModalEmail" mdbInputDirective>
          <label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
        </div>

        <div class="md-form mb-4">
          <i class="fa fa-lock prefix grey-text"></i>
          <input type="password" id="orangeForm-pass" class="form-control validate" [formControl]="signupFormModalPassword" mdbInputDirective>
          <label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
        </div>

      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button mdbBtn color="deep-orange" class="waves-light" mdbWavesEffect>Sign up</button>
      </div>
    </div>
  </div>
</div>
	

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
  signupFormModalName = new FormControl('', Validators.required);
  signupFormModalEmail = new FormControl('', Validators.email);
  signupFormModalPassword = new FormControl('', Validators.required);
}
  

Simple modal subscription


<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <i class="fa fa-user prefix grey-text"></i>
          <input type="text" id="form3" class="form-control validate" [formControl]="subscriptionFormModalName" mdbInputDirective>
          <label data-error="wrong" data-success="right" for="form3">Your name</label>
        </div>

        <div class="md-form mb-4">
          <i class="fa fa-envelope prefix grey-text"></i>
          <input type="email" id="form2" class="form-control validate" [formControl]="subscriptionFormModalEmail" mdbInputDirective>
          <label data-error="wrong" data-success="right" for="form2">Your email</label>
        </div>

      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button mdbBtn color="indigo" class="waves-light" mdbWavesEffect>Send
          <i class="fa fa-paper-plane-o ml-1"></i>
        </button>
      </div>
    </div>
  </div>
</div>
	

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    subscriptionFormModalName = new FormControl('', Validators.required);
    subscriptionFormModalEmail = new FormControl('', Validators.email);
}
  

Simple modal contact


<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <i class="fa fa-user prefix grey-text"></i>
          <input type="text" id="form34" class="form-control validate" mdbInputDirective [formControl]="contactFormModalName">
          <label data-error="wrong" data-success="right" for="form34">Your name</label>
        </div>

        <div class="md-form mb-5">
          <i class="fa fa-envelope prefix grey-text"></i>
          <input type="email" id="form29" class="form-control validate" mdbInputDirective [formControl]="contactFormModalEmail">
          <label data-error="wrong" data-success="right" for="form29">Your email</label>
        </div>

        <div class="md-form mb-5">
          <i class="fa fa-tag prefix grey-text"></i>
          <input type="text" id="form32" class="form-control validate" mdbInputDirective [formControl]="contactFormModalSubject">
          <label data-error="wrong" data-success="right" for="form32">Subject</label>
        </div>

        <div class="md-form">
          <i class="fa fa-pencil prefix grey-text"></i>
          <textarea type="text" id="form8" class="md-textarea form-control" rows="1" mdbInputDirective [formControl]="contactFormModalMessage"></textarea>
          <label data-error="wrong" data-success="right" for="form8">Your message</label>
        </div>

      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button mdbBtn color="unique" class="waves-light" mdbWavesEffect>Send
          <i class="fa fa-paper-plane-o ml-1"></i>
        </button>
      </div>
    </div>
  </div>
</div>
	

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    contactFormModalName = new FormControl('', Validators.required);
    contactFormModalEmail = new FormControl('', Validators.email);
    contactFormModalSubject = new FormControl('', Validators.required);
    contactFormModalMessage = new FormControl('', Validators.required);
}
  

Cascading modal register / login MDB Pro component


<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" 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 nav-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='fa fa-user mr-1'></i> Login">

            <!--Body-->
            <div class="modal-body mb-1">
              <div class="md-form form-sm">
                <i class="fa fa-envelope prefix"></i>
                <input mdbInputDirective type="text" id="form22" class="form-control" [formControl]="modalFormLoginEmail">
                <label for="form22">Your email</label>
              </div>

              <div class="md-form form-sm">
                <i class="fa fa-lock prefix"></i>
                <input mdbInputDirective type="password" id="form23" class="form-control" [formControl]="modalFormLoginPassword">
                <label for="form23">Your password</label>
              </div>
              <div class="text-center mt-2">
                <button mdbBtn color="info" class="waves-light" mdbWavesEffect>Log in
                  <i class="fa fa-sign-in ml-1"></i>
                </button>
              </div>
            </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>
              <button type="button" mdbBtn color="info" outline="true" class="ml-auto" data-dismiss="modal" (click)="frame.hide()" mdbWavesEffect>Close</button>
            </div>

          </mdb-tab>
          <!--/.Panel 7-->

          <!--Panel 8-->
          <mdb-tab class="tab-pane fade" id="panel8" role="tabpanel" heading="<i class='fa fa-user-plus mr-1'></i> Register">

            <!--Body-->
            <div class="modal-body">
              <div class="md-form form-sm">
                <i class="fa fa-envelope prefix"></i>
                <input mdbInputDirective type="text" id="form24" class="form-control" [formControl]="modalFormRegisterEmail">
                <label for="form24">Your email</label>
              </div>

              <div class="md-form form-sm">
                <i class="fa fa-lock prefix"></i>
                <input mdbInputDirective type="password" id="form25" class="form-control" [formControl]="modalFormRegisterPassword">
                <label for="form25">Your password</label>
              </div>

              <div class="md-form form-sm">
                <i class="fa fa-lock prefix"></i>
                <input mdbInputDirective type="password" id="form26" class="form-control" [formControl]="modalFormRegisterRepeatPassword">
                <label for="form26">Repeat password</label>
              </div>

              <div class="text-center form-sm mt-2">
                <button mdbBtn color="info" class="waves-light" mdbWavesEffect>Sign up
                  <i class="fa fa-sign-in ml-1"></i>
                </button>
              </div>

            </div>
            <!--Footer-->
            <div class="modal-footer">
              <div class="options text-right">
                <p class="pt-1">Already have an account?
                  <a href="#" class="blue-text">Log In</a>
                </p>
              </div>
              <button type="button" mdbBtn color="info" outline="true" class="ml-auto" data-dismiss="modal" (click)="frame.hide()" mdbWavesEffect>Close</button>
            </div>
          </mdb-tab>
          <!--/.Panel 8-->
        </mdb-tabset>

      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
	

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormLoginEmail = new FormControl('', Validators.email);
    modalFormLoginPassword = new FormControl('', Validators.required);
    modalFormRegisterEmail = new FormControl('', Validators.email);
    modalFormRegisterPassword = new FormControl('', Validators.required);
    modalFormRegisterRepeatPassword = new FormControl('', Validators.required);
}
  

Modal with avatar


<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
    <!--Content-->
    <div class="modal-content">

      <!--Header-->
      <div class="modal-header">
        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" alt="avatar" class="rounded-circle img-responsive">
      </div>
      <!--Body-->
      <div class="modal-body text-center mb-1">

        <h5 class="mt-1 mb-2">Maria Doe</h5>

        <div class="md-form ml-0 mr-0">
          <input type="password" type="text" id="form29" class="form-control form-control-sm validate ml-0" mdbInputDirective [formControl]="modalFormAvatarPassword">
          <label data-error="wrong" data-success="right" for="form29" class="ml-0">Enter password</label>
        </div>

        <div class="text-center mt-4">
          <button mdbBtn color="cyan" rounded="true" class="mt-1 waves-light" mdbWavesEffect>Login
            <i class="fa fa-sign-in ml-1"></i>
          </button>
        </div>
      </div>

    </div>
    <!--/.Content-->
  </div>
</div>
	

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormAvatarPassword = new FormControl('', Validators.required);
}
  

Subscription modal with orange header


<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-notify modal-warning" role="document">
    <!--Content-->
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header text-center">
        <h4 class="modal-title white-text w-100 font-weight-bold py-2">Subscribe</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true" class="white-text">&times;</span>
        </button>
      </div>

      <!--Body-->
      <div class="modal-body">
        <div class="md-form mb-5">
          <i class="fa fa-user prefix grey-text"></i>
          <input type="text" id="form3" class="form-control" mdbInputDirective [formControl]="modalFormSubscriptionName">
          <label data-error="wrong" data-success="right" for="form3">Your name</label>
        </div>

        <div class="md-form">
          <i class="fa fa-envelope prefix grey-text"></i>
          <input type="email" id="form2" class="form-control" mdbInputDirective [formControl]="modalFormSubscriptionEmail">
          <label data-error="wrong" data-success="right" for="form2">Your email</label>
        </div>
      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" mdbBtn color="warning" outline="true" class="waves-effect" mdbWavesEffect>Send
          <i class="fa fa-paper-plane-o ml-1"></i>
        </a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
	

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormSubscriptionName = new FormControl('', Validators.required);
    modalFormSubscriptionEmail = new FormControl('', Validators.email);
}
  

.modal-notify .modal-header {
    border-radius: 3px 3px 0 0;
}
.modal-notify .modal-content {
    border-radius: 3px;
}
  

Elegant modal login MDB Pro component


<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!--Content-->
    <div class="modal-content form-elegant">
      <!--Header-->
      <div class="modal-header text-center">
        <h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel">
          <strong>Sign in</strong>
        </h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body mx-4">
        <!--Body-->
        <div class="md-form mb-5">
          <input type="email" id="Form-email1" class="form-control" mdbInputDirective [formControl]="modalFormElegantEmail">
          <label data-error="wrong" data-success="right" for="Form-email1">Your email</label>
        </div>

        <div class="md-form pb-3">
          <input type="password" id="Form-pass1" class="form-control" mdbInputDirective [formControl]="modalFormElegantPassword">
          <label data-error="wrong" data-success="right" for="Form-pass1">Your password</label>
          <p class="font-small blue-text d-flex justify-content-end">Forgot
            <a href="#" class="blue-text ml-1"> Password?</a>
          </p>
        </div>

        <div class="text-center mb-3">
          <button type="button" mdbBtn gradient="blue" block="true" rounded="true" class="z-depth-1a waves-light" mdbWavesEffect>Sign in</button>
        </div>
        <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in with:</p>

        <div class="row my-3 d-flex justify-content-center">
          <!--Facebook-->
          <button type="button" mdbBtn color="white" rounded="true" class="mr-md-3 z-depth-1a waves-light" mdbWavesEffect>
            <i class="fa fa-facebook text-center"></i>
          </button>
          <!--Twitter-->
          <button type="button" mdbBtn color="white" rounded="true" class="mr-md-3 z-depth-1a waves-light" mdbWavesEffect>
            <i class="fa fa-twitter"></i>
          </button>
          <!--Google +-->
          <button type="button" mdbBtn color="white" rounded="true" class="z-depth-1a waves-light" mdbWavesEffect>
            <i class="fa fa-google-plus"></i>
          </button>
        </div>
      </div>
      <!--Footer-->
      <div class="modal-footer mx-5 pt-3 mb-1">
        <p class="font-small grey-text d-flex justify-content-end">Not a member?
          <a href="#" class="blue-text ml-1"> Sign Up</a>
        </p>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
	

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormElegantEmail = new FormControl('', Validators.email);
    modalFormElegantPassword = new FormControl('', Validators.required);
}
  

.form-elegant .font-small {
    font-size: 0.8rem; }

.form-elegant .z-depth-1a {
    -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
    box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
    -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
    box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }

.form-elegant .modal-header {
    border-bottom: none; }

.modal-dialog .form-elegant .btn .fa {
    color: #2196f3!important; }

.form-elegant .modal-body, .form-elegant .modal-footer {
    font-weight: 400; }
  

Dark modal register MDB Pro component


<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog form-dark" role="document">
    <!--Content-->
    <div class="modal-content card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).jpg');">
      <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
        <!--Header-->
        <div class="modal-header text-center pb-4">
          <h3 class="modal-title w-100 white-text font-weight-bold" id="myModalLabel">
            <strong>SIGN</strong>
            <a class="green-text font-weight-bold">
              <strong> UP</strong>
            </a>
          </h3>
          <button type="button" class="close white-text" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <!--Body-->
        <div class="modal-body">
          <!--Body-->
          <div class="md-form mb-5">
            <input type="email" id="Form-email5" class="form-control white-text" mdbInputDirective [formControl]="modalFormDarkEmail">
            <label data-error="wrong" data-success="right" for="Form-email5">Your email</label>
          </div>

          <div class="md-form pb-3">
            <input type="password" id="Form-pass5" class="form-control white-text" mdbInputDirective [formControl]="modalFormDarkPassword">
            <label data-error="wrong" data-success="right" for="Form-pass5">Your password</label>
            <div class="form-group mt-4">
              <input class="form-check-input" type="checkbox" id="checkbox624">
              <label for="checkbox624" class="white-text form-check-label">Accept the
                <a href="#" class="green-text font-weight-bold"> Terms and Conditions</a>
              </label>
            </div>
          </div>

          <!--Grid row-->
          <div class="row d-flex align-items-center mb-4">

            <!--Grid column-->
            <div class="text-center mb-3 col-md-12">
              <button type="button" mdbBtn color="success" block="true" rounded="true" class="z-depth-1 waves-light" mdbWavesEffect>Sign up</button>
            </div>
            <!--Grid column-->

          </div>
          <!--Grid row-->

          <!--Grid row-->
          <div class="row">

            <!--Grid column-->
            <div class="col-md-12">
              <p class="font-small white-text d-flex justify-content-end">Have an account?
                <a href="#" class="green-text ml-1 font-weight-bold"> Log in</a>
              </p>
            </div>
            <!--Grid column-->

          </div>
          <!--Grid row-->

        </div>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
	

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormDarkEmail = new FormControl('', Validators.email);
    modalFormDarkPassword = new FormControl('', Validators.required);
}
  

.form-dark .font-small {
  font-size: 0.8rem; }

.form-dark [type="radio"] + label,
.form-dark [type="checkbox"] + label {
  font-size: 0.8rem; }

.form-dark [type="checkbox"] + label:before {
  top: 2px;
  width: 15px;
  height: 15px; }

.form-dark .md-form label {
  color: #fff; }

.form-dark input[type=email]:focus:not([readonly]) {
  border-bottom: 1px solid #00C851;
  -webkit-box-shadow: 0 1px 0 0 #00C851;
  box-shadow: 0 1px 0 0 #00C851; }

.form-dark input[type=email]:focus:not([readonly]) + label {
  color: #fff; }

.form-dark input[type=password]:focus:not([readonly]) {
  border-bottom: 1px solid #00C851;
  -webkit-box-shadow: 0 1px 0 0 #00C851;
  box-shadow: 0 1px 0 0 #00C851; }

.form-dark input[type=password]:focus:not([readonly]) + label {
  color: #fff; }

.form-dark input[type="checkbox"] + label:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  z-index: 0;
  border: 1.5px solid #fff;
  border-radius: 1px;
  margin-top: 2px;
  -webkit-transition: 0.2s;
  transition: 0.2s; }

.form-dark input[type="checkbox"]:checked + label:before {
  top: -4px;
  left: -3px;
  width: 12px;
  height: 22px;
  border-style: solid;
  border-width: 2px;
  border-color: transparent #00c851 #00c851 transparent;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }

.form-dark .modal-header {
    border-bottom: none;
}
  

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Modals:
// MDB Angular Pro
import { ModalModule, WavesModule, InputsModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { ModalModule, WavesModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md'
// For Cascading Modal only
import { TabsModule } from 'ng-uikit-pro-standard'
// Forms and Reactive Forms Modules
import { FormsModule, ReactiveFormsModule } from '@angular/forms'