Question

我只是尝试使用Bootstrap Validator导入FormsModules。由于某种原因，FormModules禁用了Bootstrap Validator。

无论如何我能做到这一点吗？

这是我的HTML组件：

<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>

这是我的Typescript组件：

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);
        });
    }
  }
}

Angular 2+使用带有NgForm的Bootstrap Form Validator

0 个答案: