import { Component } from '@angular/core';
import { User } from './user.interface';
import { Theme } from './theme.interface';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html',
})
export class AppComponent {
public user: User;
public genders = [
{ value: 'F', display: 'Female' },
{ value: 'M', display: 'Male' }
];
public roles = [
{ value: 'admin', display: 'Administrator' },
{ value: 'guest', display: 'Guest' },
{ value: 'custom', display: 'Custom' }
]
public themes: Theme[] = [
{ backgroundColor: 'black', fontColor: 'white', display: 'Dark' },
{ backgroundColor: 'white', fontColor: 'black', display: 'Light' },
{ backgroundColor: 'grey', fontColor: 'white', display: 'Sleek' }
];
public topics = [
{ value: 'game', display: 'Gaming' },
{ value: 'tech', display: 'Technology' },
{ value: 'life', display: 'Lifestyle' },
];
public toggles = [
{ value: 'toggled', display: 'Toggled' },
{ value: 'untoggled', display: 'UnToggled' },
];
public t = {
true: { value: 'toggled', display: 'Toggled' },
false: { value: 'untoggled', display: 'UnToggled' }
}
ngOnInit() {
this.user = {
name: '',
gender: this.genders[0].value,
role: null,
theme: this.themes[0],
isActive: false,
toggle: this.toggles[1].value,
topics: [this.topics[1].value]
}
}
save(isValid: boolean, f: User) {
if (!isValid) return;
console.log(f);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<title>Handle different form controls</title>
<!--optional bootstrap for faster styling-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
/**
* PLUNKER VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
export interface Theme {
display: string;
backgroundColor: string;
fontColor: string;
}
export interface User {
name: string;
age?: number;
gender?: string;
role?: string;
theme?: ITheme;
isActive?: boolean;
topics?: string[];
toggle?: string;
}
<div class="container">
<h1>Add user</h1>
<form #f="ngForm" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" [(ngModel)]="user.name">
</div>
<div class="form-group">
<label>Age</label>
<input type="number" class="form-control" name="age" [(ngModel)]="user.age">
</div>
<div class="form-group">
<label>Gender</label>
<div class="radio" *ngFor="let gender of genders">
<label>
<input type="radio" name="gender" [(ngModel)]="user.gender" [value]="gender.value">
{{gender.display}}
</label>
</div>
</div>
<div class="form-group">
<label>Role</label>
<select name="role" class="form-control" [(ngModel)]="user.role">
<option *ngFor="let role of roles" [value]="role.value">{{role.display}}</option>
</select>
</div>
<div class="form-group">
<label>Theme</label>
<select name="theme" class="form-control" [(ngModel)]="user.theme">
<option *ngFor="let theme of themes" [ngValue]="theme">{{theme.display}}</option>
</select>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="isActive" [(ngModel)]="user.isActive">
Is Active
</label>
</div>
</div>
<div class="form-group">
<label>Topics</label>
<select multiple name="topics" class="form-control" [(ngModel)]="user.topics">
<option *ngFor="let topic of topics" [value]="topic.value">{{topic.display}}</option>
</select>
</div>
<div class="form-group">
<input type="hidden" name="toggle" [(ngModel)]="user.toggle">
<div class="checkbox">
<label>
<input type="checkbox" [checked]="user.toggle === toggles[0].value"
(change)="$event.target.checked? (user.toggle = toggles[0].value) : (user.toggle = toggles[1].value)">
{{ toggles[0].display }}
</label>
</div>
</div>
<button type="submit" (click)="save(f.value, f.valid)" class="btn btn-default">Submit</button>
</form>
<div style="margin-top: 20px" *ngIf="f">
<div>Form details:-</div>
<pre>Is form valid?: <br>{{f.valid | json}}</pre>
<pre>Is form submitted?: <br>{{f.submitted | json}}</pre>
<pre>submitted value: <br>{{f.value | json}}</pre>
</div>
</div>