支持Angular的响应式表单验证和模板驱动表单验证
效果图：
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
