Validation Modal Form not being displayed

Dear @EytanD

Thanks for your report!

The problem is with the docs - those forms has an old validation which is not used anymore. We have to update our docs.

Please take a look at the below code - there's working validation:

.html:

<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="fas fa-user prefix grey-text"></i>
          <input type="text" id="form34" class="form-control validate" mdbInput mdbValidate [formControl]="contactFormModalName">
          <label for="form34">Your name</label>
          <mdb-error *ngIf="contactFormModalName.invalid && (contactFormModalName.dirty || contactFormModalName.touched)">Input invalid</mdb-error>
          <mdb-success *ngIf="contactFormModalName.valid && (contactFormModalName.dirty || contactFormModalName.touched)">Input valid</mdb-success>
        </div>

        <div class="md-form mb-5">
          <i class="fas fa-envelope prefix grey-text"></i>
          <input type="email" id="form29" class="form-control validate" mdbInput mdbValidate [formControl]="contactFormModalEmail">
          <label for="form29">Your email</label>
          <mdb-error *ngIf="contactFormModalEmail.invalid && (contactFormModalEmail.dirty || contactFormModalEmail.touched)">Input invalid</mdb-error>
          <mdb-success *ngIf="contactFormModalEmail.valid && (contactFormModalEmail.dirty || contactFormModalEmail.touched)">Input valid</mdb-success>
        </div>

        <div class="md-form mb-5">
          <i class="fas fa-tag prefix grey-text"></i>
          <input type="text" id="form32" class="form-control validate" mdbInput mdbValidate [formControl]="contactFormModalSubject">
          <label  for="form32">Subject</label>
          <mdb-error *ngIf="contactFormModalSubject.invalid && (contactFormModalSubject.dirty || contactFormModalSubject.touched)">Input invalid</mdb-error>
          <mdb-success *ngIf="contactFormModalSubject.valid && (contactFormModalSubject.dirty || contactFormModalSubject.touched)">Input valid</mdb-success>
        </div>

        <div class="md-form">
          <i class="fas fa-pencil-alt prefix grey-text"></i>
          <textarea type="text" id="form8" class="md-textarea form-control" rows="1" mdbInput mdbValidate
                    [formControl]="contactFormModalMessage"></textarea>
          <label  for="form8">Your message</label>
          <mdb-error *ngIf="contactFormModalMessage.invalid && (contactFormModalMessage.dirty || contactFormModalMessage.touched)">Input invalid</mdb-error>
          <mdb-success *ngIf="contactFormModalMessage.valid && (contactFormModalMessage.dirty || contactFormModalMessage.touched)">Input valid</mdb-success>
        </div>

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

.ts:

contactFormModalName = new FormControl('', Validators.required);
  contactFormModalEmail = new FormControl('', Validators.email);
  contactFormModalSubject = new FormControl('', Validators.required);
  contactFormModalMessage = new FormControl('', Validators.required);

Best Regards,

Damian