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