javascript - Angular 2+ Använda Bootstrap Form Validator med NgForm

Jag försöker bara använda Bootstrap Validator med FormsModules importerat. Av någon anledning inaktiverar FormModules Bootstrap Validator.

Finns det något sätt hur jag kan göra det?

Här är min HTML-komponent:

<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form #contactForm="ngForm" (submit)="getMailSender(message)">
        <div class="modal-header text-center">
          <h5 class="modal-title mx-auto">Contact</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <input id="contact-name" [(ngModel)]="message.name" name="name" type="text" class="form-control"
                   placeholder="Enter name" required>
          </div>
          <div class="form-group">
            <input id="contact-subject" [(ngModel)]="message.subject" name="subject" type="text" class="form-control"
                   placeholder="Enter subject" required>
          </div>
          <div class="form-group">
            <input id="contact-email" [(ngModel)]="message.email" name="email" type="email" class="form-control"
                   placeholder="Enter email" required>
          </div>
          <div class="form-group">
            <textarea id="contact-message" [(ngModel)]="message.message" name="message" class="form-control"
                      placeholder="Enter message" rows="3" required></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button [disabled]="!contactForm.valid" type="submit" class="btn btn-primary">Send</button>
        </div>
      </form>
    </div>
  </div>
</div>

Här är min Typescript-komponent:

import {Component, OnInit, ViewChild} from '@angular/core';
import {MailsenderService, Message} from '../../services/mailsender.service';

@Component({
  selector: 'app-contact-modal',
  templateUrl: './contact-modal.component.html',
  styleUrls: ['./contact-modal.component.css']
})
export class ContactModalComponent implements OnInit {

  @ViewChild('contactForm') contactForm;
  message: Message = {};

  constructor(private mailsenderService: MailsenderService) {
  }

  ngOnInit() {
  }

  getMailSender(message) {
    if (this.contactForm.valid) {
      this.mailsenderService.mailSender(message).subscribe(
        res => {
          console.log('Testing', res);
        },
        error => {
          console.log('Testing', error);
        });
    }
  }
}