支持Angular的响应式表单验证和模板驱动表单验证
效果图:
Using with Template driven Forms
ascasc@aa.com | |
Angular |
Form status: "VALID"
Code
import { Component, OnInit } from '@angular/core'; | |
@Component({ | |
templateUrl: './views/using-in-form.html' | |
}) | |
export class UsingWithFormExample implements OnInit { | |
itemList = []; | |
selectedItems = []; | |
settings = {}; | |
formModel = { | |
name: null, | |
email: '', | |
skills: [] | |
}; | |
submitted = false; | |
onSubmit() { 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 = { | |
text: "Select Skills", | |
selectAllText: 'Select All', | |
unSelectAllText: 'UnSelect All', | |
classes: "myclass custom-class" | |
}; | |
} | |
onItemSelect(item: any) { | |
console.log(item); | |
console.log(this.selectedItems); | |
} | |
OnItemDeSelect(item: any) { | |
console.log(item); | |
console.log(this.selectedItems); | |
} | |
onSelectAll(items: any) { | |
console.log(items); | |
} | |
onDeSelectAll(items: any) { | |
console.log(items); | |
} | |
} |
官网:https://cuppalabs.github.io/angular2-multiselect-dropdown/#/usinginform