Angular2 Form

1 basic usage

1 import formDirectives

import {formDirectives} from 'angular2/forms';

2 inject directive into View

directives: [formDirectives]

3 config your form template

template: `<form #f="form" (submit)="onSubmit(f.value)">
<input type="text" ng-control="username" />
<input type="text" ng-control="password"/>
<button type="submit">submit</button>
</form>`,

　　　　take care : 1 #f='form' 2 ng-control

after you submit you will get the result like {username:xx,password:xx}

4 all the code

/**
* Created by Administrator on 2015/7/24.
*/
import {Component,View} from 'angular2/angular2';
import {formDirectives} from 'angular2/forms';
@Component({
selector: 'form-test'
})

@View({
template: `<form #f="form" (submit)="onSubmit(f.value)">
<input type="text" ng-control="username" />
<input type="text" ng-control="password"/>
<button type="submit">submit</button>
</form>`,
directives: [formDirectives]})

export class FormTest {
constructor() {
}

onSubmit(formGroup) {
console.log(formGroup);
}
}

　　

2 two-way binding

use [(ng-model)]='xxxx'

@View({
template: `<form #f="form" (submit)="onSubmit(f.value)">
<input type="text" ng-control="username" [(ng-model)]="login.userName"/>
<input type="text" ng-control="password" [(ng-model)]="login.password"/>
<button type="submit">submit</button>
</form>`,
directives: [formDirectives]})

　　

3 ng-control-group

@View({
template: `<form #f="form" (submit)="onSubmit(f.value)">
<div ng-control-group="basic">
<input type="text" ng-control="username" [(ng-model)]="login.basic.userName"/>
<input type="text" ng-control="password" [(ng-model)]="login.basic.password"/>
</div>
<div ng-control-group="company">
<input type="text" ng-control="companyname" [(ng-model)]="login.company.companyName"/>
</div>
<button type="submit">submit</button>
</form>`,
directives: [formDirectives]})

　　use ng-control-group, you will get the result like

this.login = {
basic: {
userName: 'Jackey',
password: '123'
},
company: {
companyName: ''
}
}