0
点赞
收藏
分享

微信扫一扫

Angular4_下拉框多选(支持响应式表单验证和模板驱动表单验证)


支持Angular的响应式表单验证和模板驱动表单验证

效果图:

Angular4_下拉框多选(支持响应式表单验证和模板驱动表单验证)_Email


Using with Template driven Forms


Skills * required

Angular




Name



Email Address * required


Submit


Name

 

Email

ascasc@aa.com

Skills

Angular

{ "name": "", "email": "ascasc@aa.com", "skills": [ { "id": 1, "itemName": "Angular" } ] }

Form status: "VALID"


Code


  • using-in-forms.ts
  • using-with-forms.html



import { Component, OnInit } from '@angular/core';

 

 

 

Component({

 

'./views/using-in-form.html'

 

})

 

export class UsingWithFormExample implements OnInit

 

=

 

=

 

=

 

=

 

null,

 

'',

 

skills: []

 

};

 

= false;

 

this.submitted = true; }

 

constructor() { }

 

ngOnInit() {

 

 

 

this.itemList =

 

"id": 1, "itemName": "Angular"

 

"id": 2, "itemName": "JavaScript"

 

"id": 3, "itemName": "HTML"

 

"id": 4, "itemName": "CSS"

 

"id": 5, "itemName": "ReactJS"

 

"id": 6, "itemName": "HTML5"

 

];

 

 

 

this.settings =

 

"Select Skills",

 

'Select All',

 

'UnSelect All',

 

"myclass custom-class"

 

};

 

}

 

item: any) {

 

console.log(item);

 

console.log(this.selectedItems);

 

}

 

item: any) {

 

console.log(item);

 

console.log(this.selectedItems);

 

}

 

items: any) {

 

console.log(items);

 

}

 

items: any) {

 

console.log(items);

 

}

 

 

 

}


 

form (ngSubmit)="onSubmit()" #loginForm="ngForm" style="border: 1px solid #ccc; padding: 10px;">

 

div class="form-group">

 

label for="name">Skills</label>

 

angular2-multiselect [data]="itemList" [(ngModel)]="formModel.skills"

 

settings]="settings"

 

onSelect)="onItemSelect($event)"

 

onDeSelect)="OnItemDeSelect($event)"

 

onSelectAll)="onSelectAll($event)"

 

onDeSelectAll)="onDeSelectAll($event)" name="skills" #skills="ngModel" required>

 

angular2-multiselect>

 

div [hidden]="skills.valid" class="alert alert-danger">

 

div [hidden]="!skills.hasError('required')">Atleast one Skill is required</div>

 

div>

 

div>

 

div class="form-group">

 

label for="name">Name</label>

 

input type="text" class="form-control" id="name" required pattern="[a-zA-Z][a-zA-Z ]+" [(ngModel)]="formModel.name" name="name"

 

name="ngModel">

 

div [hidden]="name.valid || name.pristine" class="alert alert-danger">

 

div [hidden]="!name.hasError('required')">Name is required</div>

 

div [hidden]="!name.hasError('pattern')">Only alphabetsallowed</div>

 

 

 

div>

 

div>

 

div class="form-group">

 

label for="name">Email Address</label>

 

input type="text" class="form-control" id="emailaddress" required [(ngModel)]="formModel.email" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"

 

email="ngModel">

 

div [hidden]="email.valid || email.pristine" class="alert alert-danger">

 

div [hidden]="!email.hasError('required')">Email is required</div>

 

div [hidden]="!email.hasError('pattern')">Email format should be <small><b>joe@abc.com</b></small></div>

 

div>

 

div>

 

button type="submit" class="btn btn-success btn-block" [disabled]="!loginForm.form.valid">Submit</button>

 

form>


view raw using-with-forms.html hosted with ❤ by  GitHub



官网:https://cuppalabs.github.io/angular2-multiselect-dropdown/#/usinginform

举报

相关推荐

0 条评论