<!DOCTYPE html>
<html>
<head>
<title>Angular2 FormBuilder Example</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### Angular2 Starter Plunker - Typescript
A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, and DI usage.
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
//main entry point
import {bootstrap, FORM_BINDINGS} from 'angular2/angular2'
import {App} from './app'
bootstrap(App, [FORM_BINDINGS])
.catch(err => console.error(err));
//our root app component
import {
Component,
View,
FORM_BINDINGS,
FORM_DIRECTIVES,
ControlGroup,
FormBuilder,
Validators
} from 'angular2/angular2'
@Component({
selector: 'my-app',
viewBindings: [FORM_BINDINGS]
})
@View({
template: `
<form [ng-form-model]="userInputForm">
<p>Name <input ng-control="name"></p>
<div ng-control-group="address">
<p>address line 1 <input type="password" ng-control="addressLine1"></p>
<p>city <input type="text" ng-control="city"></p>
<p>state <input type="text" ng-control="state"></p>
<p>zip <input type="text" ng-control="zip"></p>
</div>
<div ng-control-group="passwordRetry">
<p>Password <input type="password" ng-control="password"></p>
<p>Confirm password <input type="password" ng-control="passwordConfirmation"></p>
</div>
</form>
<h3>Form value:</h3>
<pre>{{value}}</pre>
`,
directives: [FORM_DIRECTIVES]
})
export class App {
userInputForm: ControlGroup;
taskList = [{name:"new task",completed:false}]
constructor(builder: FormBuilder) {
this.userInputForm = builder.group({
name: ["", Validators.required],
address: builder.group({
addressLine1 : ["", Validators.required],
city: ["", Validators.required],
state: ["", Validators.required],
zip: ["", Validators.required]
}),
passwordRetry: builder.group({
password: ["", Validators.required],
passwordConfirmation: ["", Validators.required]
})
});
}
addTask() {
this.taskList.push({name:"new task",completed:false})
}
get value(): string {
return JSON.stringify(this.userInputForm.value, null, 2);
}
}