Bootstrap form validation not working in angular2 -
i have implemented bootstrap form validation in angular2 application , of form elements not getting validated after using bootstrap form validation directive properly. when tried inspecting code, found "has-error" class not appearing in form fields.
here form code:
<form id="emailform" #emailform= "ngform" novalidate="novalidate" [sabootstrapvalidator]="validatoroptions"> <!-- widget content --> <div class="widget-body"> <!--template name --> <fieldset> <div class="form-group"> <div class="row"> <section class="col-sm-12 col-md-10"> <strong class="control-label">name</strong><label class="required"></label> <input class="form-control" placeholder="enter template name" type="text" value="{{message.name}}" name="templatename" [(ngmodel)]="composemodel.name"> </section> <section class="col-sm-12 col-md-2"> <label for="select2-multiple"> <strong>category</strong></label> <select style="width:100%" class="form-control select2" name="category"> <option *ngfor = "let category of templatecategories" value="{{category.id}}">{{category.name}}</option> </select> </section> </div> </div> </fieldset> <!--description --> <fieldset> <div class="form-group"> <div class="row"> <section class="col-sm-12 col-md-12 "> <strong>description</strong> <textarea class="form-control" name="review" rows="2" placeholder="enter brief summary decribes puropose of template " [(ngmodel)]="composemodel.description"></textarea> </section> </div> </div> </fieldset> <!-- --> <fieldset> <div class="form-group"> <div class="row"> <section class="col-md-12"> <strong class="control-label">to</strong><label class="required"></label> <popover-content #multselectcontent> <span style="color: #3276b1">hold ctrl-key select multiple emails<br /> start typing search email</span> </popover-content> <a (click)="(null)" class="fa fa-question-circle" popoverplacement="top" [popoveronhover]="true" data-html="true" popovertitle="multiple selection" [popover]="multselectcontent"></a> <div class="boxed"> <select multiple select2 style="width:100%" data-select-search="true" class="form-control select2-multiple" name="emailto"> <optgroup label="responsible parties"> <option value="1"> sunny.orlaf@smartadmin.com</option> <option value="2"> rachael.hawi@smartadmin.com</option> <option value="3"> michael.safiel@smartadmin.com</option> </optgroup> <optgroup label="evaluator"> <option value="alex.jones@infowars.com"> alex.jones@infowars.com</option> <option value="oruf.matalla@gmail.com"> oruf.matalla@gmail.com</option> <option value="hr@smartadmin.com"> hr@smartadmin.com</option> <option value="it@smartadmin.com"> it@smartadmin.com</option> </optgroup> <optgroup label="informed parties"> <option value="alex.jones@infowars.com"> alex1.jones@infowars.com</option> <option value="oruf.matalla@gmail.com"> oruf1.matalla@gmail.com</option> <option value="hr@smartadmin.com"> hr1@smartadmin.com</option> <option value="it@smartadmin.com"> it1@smartadmin.com</option> </optgroup> </select> </div> </section> </div> </div> </fieldset> <!-- cc --> <fieldset> <div class="form-group"> <div class="row"> <section class="col-sm-12 col-md-6"> <label><strong>cc</strong></label> <popover-content #multselectcontent1> <span style="color: #3276b1">hold ctrl-key select multiple emails<br /> start typing search email</span> </popover-content> <a (click)="(null)" class="fa fa-question-circle" popoverplacement="top" [popoveronhover]="true" data-html="true" popovertitle="multiple selection" [popover]="multselectcontent1"></a> <div class="boxed"> <select multiple select2 style="width:100%" data-select-search="true" class="select2"> <optgroup label="responsible parties"> <option value="sunny.orlaf@smartadmin.com">sunny.orlaf@smartadmin.com</option> <option value="rachael.hawi@smartadmin.com">rachael.hawi@smartadmin.com</option> <option value="michael.safiel@smartadmin.com">michael.safiel@smartadmin.com</option> </optgroup> <optgroup label="evaluator"> <option value="alex.jones@infowars.com">alex.jones@infowars.com</option> <option value="oruf.matalla@gmail.com">oruf.matalla@gmail.com</option> <option value="hr@smartadmin.com">hr@smartadmin.com</option> <option value="it@smartadmin.com">it@smartadmin.com</option> </optgroup> <optgroup label="informed parties"> <option value="alex.jones@infowars.com">alex1.jones@infowars.com</option> <option value="oruf.matalla@gmail.com">oruf1.matalla@gmail.com</option> <option value="hr@smartadmin.com">hr1@smartadmin.com</option> <option value="it@smartadmin.com">it1@smartadmin.com</option> </optgroup> </select> </div> </section> <!-- bcc --> <section class="col-sm-12 col-md-6"> <label><strong>bcc</strong></label> <popover-content #multselectcontent1> <span style="color: #3276b1">hold ctrl-key select multiple emails<br /> start typing search email</span> </popover-content> <a (click)="(null)" class="fa fa-question-circle" popoverplacement="top" [popoveronhover]="true" data-html="true" popovertitle="multiple selection" [popover]="multselectcontent1"></a> <div class="boxed"> <select multiple select2 style="width:100%" data-select-search="true" class="select2"> <optgroup label="responsible parties"> <option value="sunny.orlaf@smartadmin.com">sunny.orlaf@smartadmin.com</option> <option value="rachael.hawi@smartadmin.com">rachael.hawi@smartadmin.com</option> <option value="michael.safiel@smartadmin.com">michael.safiel@smartadmin.com</option> </optgroup> <optgroup label="evaluator"> <option value="alex.jones@infowars.com">alex.jones@infowars.com</option> <option value="oruf.matalla@gmail.com">oruf.matalla@gmail.com</option> <option value="hr@smartadmin.com">hr@smartadmin.com</option> <option value="it@smartadmin.com">it@smartadmin.com</option> </optgroup> <optgroup label="informed parties"> <option value="alex.jones@infowars.com">alex1.jones@infowars.com</option> <option value="oruf.matalla@gmail.com">oruf1.matalla@gmail.com</option> <option value="hr@smartadmin.com">hr1@smartadmin.com</option> <option value="it@smartadmin.com">it1@smartadmin.com</option> </optgroup> </select> </div> </section> </div> </div> </fieldset> <!--subject --> <fieldset> <div class="form-group"> <div class="row"> <section class="col-md-12 "> <label><strong>subject</strong></label> <popover-content #multselectcontent> <span style="color: #3276b1">hold ctrl-key select multiple emails<br /> start typing search email</span> </popover-content> <a (click)="(null)" class="fa fa-question-circle" popoverplacement="top" [popoveronhover]="true" data-html="true" popovertitle="multiple selection" [popover]="multselectcontent"></a> <div class="boxed"> <select multiple select2 style="width:100%" data-select-search="true" class="form-control select2-multiple" name="emailto" placeholder = "email subject"> <optgroup label="evaluation type title"> </optgroup> <optgroup label="topic"> <option value="topic1">topic1</option> <option value="topic2">topic2</option> </optgroup> <optgroup label="question"> <option value="question1">question1</option> <option value="question2">question2</option> </optgroup> <optgroup label="response"> <option value="response1">response1</option> <option value="response2">response2</option> </optgroup> <optgroup label="value"> <option value="value1">value1</option> <option value="value2">value2</option> </optgroup> <optgroup label="today's date'"> <option value="4.5.2017">4.5.2017</option> </optgroup> </select> </div> <!--<input class="form-control" placeholder="email subject" type="text" value="{{message.subject}}">--> </section> </div> </div> </fieldset> <!--message --> <fieldset> <div class="form-group"> <div class="row"> <section class="col-md-12 "> <strong>message</strong><label class="control-label required"></label> <div class="summernote form-control" name="messagebody" [summernote]="{height: 120}"></div> </section> </div> </div> </fieldset> <!--action buttons --> <fieldset> <div class="smart-form pull-right"> <section class="col-md-12 p "> <div class="btn-group"> <button class="btn btn-sm btn-primary" type="button"><i class="fa fa-times"></i> cancel </button> </div> <div class="btn-group"> <button class="btn btn-sm btn-success" type="submit" [disabled]="!emailform.invalid" (click)="onsubmit()"><i class="fa fa-save"></i> save </button> </div> </section> </div> </fieldset> </div> <!-- end widget content --> </form> this how form appears : 
here component.ts code:
import { component, oninit } '@angular/core'; import { activatedroute, router } '@angular/router'; import { outlookservice, message } '../shared'; import { emailcomposeservice } '../compose/compose.service'; import { emailcomposemodal } '../../data-model/email-compose'; declare var $: any; @component({ selector: 'sa-compose', templateurl: 'compose.component.html', }) export class composecomponent implements oninit { public $: any; validatoroptions = { feedbackicons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { templatename: { validators: { notempty: { message: 'the template name required , cannot empty' } } }, emailto: { validators: { notempty: { message: 'the sender email required , cannot empty' } } }, messagebody: { validators: { callback: { message: 'the content required , cannot empty', callback: function (value, validator, $field) { var code = $('[name="messagebody"]').summernote('code'); // <p><br></p> code generated summernote empty content return (code !== '' && code !== '<p><br></p>'); } } } } } }; public templatename: string = ''; public message: message; public carboncopy: boolean = false; public blindcarboncopy: boolean = false; public attachments: boolean = false; public sending: boolean = false; templatecategories: any; constructor(private route: activatedroute, private router: router, private service: outlookservice, private composeservice: emailcomposeservice) { } ngoninit() { this.message = new message({}) this.composeservice.gettempatecategory(1, json.parse(localstorage.getitem('currentuser')).access_token).subscribe(data => { this.templatecategories = data; this.composemodel.categoryid = data[0].id; }); } isupdate: boolean = false; isdelete: boolean = false; iscreatetemplate: boolean = false; submitted = false; composemodel = new composeclass(); onsubmit() { //this.uploadimage(); if (this.isupdate) { let composeputdata: emailcomposemodal = { id: +this.composemodel.id, industryid: +this.composemodel.industryid, categoryid: +this.composemodel.categoryid, name: this.composemodel.name, content: this.composemodel.content, description: this.composemodel.description, status: this.composemodel.status, createdby: this.composemodel.createdby, createtimestamp: this.composemodel.createtimestamp, modifiedby: localstorage.getitem('selectedrolesid'), modifiedtimestamp: new date(), datastateflag: this.composemodel.datastateflag } if (this.isdelete) { this.composeservice.updatetemplate(composeputdata, json.parse(localstorage.getitem('currentuser')).access_token).subscribe(res => { if (res.status === 200) { this.isupdate = false; this.isdelete = false; this.composemodel = new composeclass(); this.iscreatetemplate = false; $('.divmessagebox').hide(); } }); } else { this.composeservice.updatetemplate(composeputdata, json.parse(localstorage.getitem('currentuser')).access_token).subscribe(res => { if (res.status === 200) { this.isupdate = false; this.composemodel = new composeclass(); this.iscreatetemplate = false; $('.divmessagebox').hide(); } }); } } else { var code = $('[name="messagebody"]').summernote('code'); let postdata: emailcomposemodal = { industryid: 1, categoryid: +this.composemodel.categoryid, name: this.composemodel.name, content: code, description: this.composemodel.description, status: "active", createdby: localstorage.getitem('selectedrolesid'), createtimestamp: new date(), datastateflag: "i", "modifiedby": null, "modifiedtimestamp": null } this.submitted = true; this.composeservice.createtemplate(postdata, json.parse(localstorage.getitem('currentuser')).access_token).subscribe(res => { if (res.status === 200) { this.composemodel = new composeclass(); this.iscreatetemplate = true; $('.nav-tabs a[href="#a1"]').tab('show'); $('[name="messagebody"]').summernote('reset'); } }) } } } export class composeclass { constructor( public id?: number, public industryid?: number, public categoryid?: number, public name?: string, public content?: string, public description?: string, public status?: string, public createdby?: string, public createtimestamp?: date, public modifiedby?: string, public modifiedtimestamp?: date, public datastateflag?: string ) { } } the first input element getting getting validated select fields , summernote fields not getting validated.
i have resolved it. select2 validation work if excluded: [':disabled'] added validatoroptions. checks null value.
regarding summernote, adding following code oninit() solved issue :
$(".summernote") .on('summernote.change', function(customevent, contents, $editable) { // revalidate content when value changed summernote $('#emailform').bootstrapvalidator('revalidatefield', 'content'); hope helps!
Comments
Post a Comment