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);