Forms 引导表单验证在angular2中不起作用
我已经在angular2应用程序中实现了引导表单验证，即使正确使用引导表单验证指令，一些表单元素也没有得到验证。当我尝试检查代码时，我发现“has error”类没有出现在表单字段中 这是我的表格代码：Forms 引导表单验证在angular2中不起作用,forms,validation,angular,angular2-forms,twitter-bootstrap-form,Forms,Validation,Angular,Angular2 Forms,Twitter Bootstrap Form,我已经在angular2应用程序中实现了引导表单验证，即使正确使用引导表单验证指令，一些表单元素也没有得到验证。当我尝试检查代码时，我发现“has error”类没有出现在表单字段中 这是我的表格代码： <form id="emailForm" #emailForm= "ngForm" novalidate="novalidate"
<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 a brief summary that decribes the puropose of this template " [(ngModel)]="composeModel.Description"></textarea>
</section>
</div>
</div>
</fieldset>
<!-- To -->
<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 to select multiple emails<br /> Start typing to search for 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 to select multiple emails<br /> Start typing to search for 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 to select multiple emails<br /> Start typing to search for 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 to select multiple emails<br /> Start typing to search for 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>
名称
类别
{{category.Name}
说明
至
按住ctrl键选择多封电子邮件
开始键入以搜索电子邮件
这是我的component.ts代码：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { OutlookService, Message } from '../shared';
import { EmailComposeService } from '../compose/compose.service';
import { EmailComposeModal } from '../../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 is required and cannot be empty'
}
}
},
emailTo: {
validators: {
notEmpty: {
message: 'The sender email is required and cannot be empty'
}
}
},
messageBody: {
validators: {
callback: {
message: 'The content is required and cannot be empty',
callback: function (value, validator, $field) {
var code = $('[name="messageBody"]').summernote('code');
// <p><br></p> is code generated by Summernote for 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
) {
}
}
从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{ActivatedRoute，Router}；
从“../shared”导入{OutlookService，Message}；
从“../compose/compose.service”导入{EmailComposeService}；
从“../../data model/email compose”导入{EmailComposeModal}；
声明var$：任何；
@组成部分({
选择器：“sa compose”，
templateUrl:'compose.component.html'，
})
导出类ComposeComponent实现OnInit{
公共美元：任何；
验证程序选项={
反馈图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
字段：{
模板名称：{
验证器：{
注意：{
消息：“模板名称是必需的，不能为空”
}
}
},
电邮至：{
验证器：{
注意：{
消息：“发件人电子邮件是必需的，不能为空”
}
}
},
消息正文：{
验证器：{
回拨：{
消息：“内容是必需的，不能为空”，
回调：函数（值，验证器，$field）{
var code=$（'[name=“messageBody”]'）。summernote（'code'）；
//
是Summernote为空内容生成的代码
返回（代码！=''&&code！='
'）；
}
}
}
}
}
};
公共模板名称：字符串=“”；
公共信息：信息；
公共复写：布尔值=false；
公共副本：布尔值=false；
公共附件：布尔值=false；
公共发送：布尔值=false；
模板类别：任意；
构造函数（专用路由：ActivatedRoute，
专用路由器：路由器，
专用服务：Outlook服务，专用组件服务：EmailComposeService）{
}
恩戈尼尼特（）{
this.message=新消息（{}）
this.composeservice.getTempateCategory（1，JSON.parse（localStorage.getItem（'currentUser'））.access\u token.subscribe（数据=>{
this.templateCategories=数据；
this.composeModel.CategoryId=数据[0].Id；
});
}
isUpdate:boolean=false；
isDelete：布尔值=假；
isCreateTemplate:boolean=false；
提交=错误；
composeModel=新的ComposeClass（）；
onSubmit（）{
//这是uploadImage（）；
if（this.isUpdate）{
让composePutData:EmailComposeModal={
Id:+this.composeModel.Id，
IndustryId:+this.composeModel.IndustryId，
CategoryId:+this.composeModel.CategoryId，
名称：this.composeModel.Name，
内容：this.composeModel.Content，
Description:this.composeModel.Description，
状态：this.composeModel.Status，
CreatedBy:this.composeModel.CreatedBy，
CreateTimestamp:this.composeModel.CreateTimestamp，
修改方式：localStorage.getItem（'selectedRolesID'），
修改的时间戳：新日期（），
DataStateFlag:this.composeModel.DataStateFlag
}
如果（这是isDelete）{
this.composeservice.updateTemplate（composePutData，JSON.parse（localStorage.getItem（'currentUser'））.access\u token）.subscribe（res=>{
如果（资源状态===200）{
this.isUpdate=false；
this.isDelete=false；
这是我的
$(".summernote")
.on('summernote.change', function(customEvent, contents, $editable) {
// Revalidate the content when its value is changed by Summernote
$('#emailForm').bootstrapValidator('revalidateField', 'content');