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: '' } }