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

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

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

Using with Template driven Forms

Skills* required

Name

Email Address* required

Name
Email	[email protected]
Skills	Angular

{ "name": "", "email": "[email protected]", "skills": [ { "id": 1, "itemName": "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);
	}

	}

	<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>[email protected]</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

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

Using with Template driven Forms

Angular

Code

相关推荐