Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
	selector: 'app-root',
	template: `
		<h2>Template Driven Form</h2>
		<form #form="ngForm" (ngSubmit)="submitForm(form.value)">
			<div style="margin-bottom:20px">
				<label [for]="named" align="top">Name:</label>
				<eui-textbox #named [(ngModel)]="user.name" [invalid]="formErrors.name" name="name" required></eui-textbox>
				<div class="error">{{formErrors.name}}</div>
			</div>
			<div style="margin-bottom:20px">
				<label [for]="email" align="top">Email:</label>
				<eui-textbox #email [(ngModel)]="user.email" [invalid]="formErrors.email" name="email" pattern="^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$"></eui-textbox>
				<div class="error">{{formErrors.email}}</div>
			</div>
			<div style="margin-bottom:20px">
				<label [for]="hero" align="top">Select a hero:</label>
				<eui-combobox #hero [(ngModel)]="user.hero" [data]="heroes" name="hero"></eui-combobox>
				<div class="error">{{formErrors.email}}</div>
			</div>
			<div style="margin-bottom:20px">
				<eui-checkbox #accept [(ngModel)]="user.accept" name="accept"></eui-checkbox>
				<label [for]="accept">Accept Me</label>
			</div>
			<div style="margin-bottom:20px">
				<eui-linkbutton [disabled]="!form.valid" (click)="submitForm(form.value)">Submit</eui-linkbutton>
			</div>
		</form>
	`,
	styles: [`
		.error{
			color: red;
			font-size: 12px;
			margin: 4px 0;
		}
	`]
})
export class AppComponent {
	@ViewChild('form') form: NgForm;

	user = {
		name: '',
		email: 'test@jeasyui.com',
		hero: '',
		accept: true
	};

	submitForm(value: any) {
		alert(JSON.stringify(value))
	}

	ngAfterViewInit() {
		this.form.valueChanges.subscribe(data => {
			for(const field in this.formErrors){
				this.formErrors[field] = '';
				const control = this.form.form.get(field);
				if (control && !control.valid){
					const messages = this.validationMessages[field];
					for(const key in control.errors){
						this.formErrors[field] += messages[key] + '';
					}
				}
			}
		});
	}

	heroes = [
		{value: 11, text: 'Mr. Nice'},
		{value: 12, text: 'Narco'},
		{value: 13, text: 'Bombasto'},
		{value: 14, text: 'Celeritas'},
		{value: 15, text: 'Magneta'},
		{value: 16, text: 'RubberMan'},
		{value: 17, text: 'Dynama'},
		{value: 18, text: 'Dr IQ'},
		{value: 19, text: 'Magma'},
		{value: 20, text: 'Tornado'}
	];

	formErrors = {
		name: '',
		email: ''
	};

	validationMessages = {
		name: {
			required: 'This field is required.'
		},
		email: {
			pattern: 'Please enter a valid email address.'
		}
	};
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { EasyUIModule } from 'easyui/easyui/easyui.module';


import { AppComponent }   from './app.component';

@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpModule,
    EasyUIModule
  ]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);