javascript - Angular 2+ Bootstrap Formuliervalidator gebruiken met NgForm
Ik probeer gewoon Bootstrap Validator te gebruiken met FormsModules geïmporteerd. Om een of andere reden schakelt FormModules Bootstrap Validator uit.
Is er een manier waarop ik dat kan doen?
Hier is mijn HTML-component:
<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">×</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>
Hier is mijn Typescript-component:
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);
});
}
}
}