[Angular 2] A Simple Form in Angular 2

When you create a Form in Angular 2, you can easily get all the values from the Form using ControlGroup and Controls.

 

• Bind [ng-form-model] to the <form>
• form bind to ControlGoup
• Bind [ng-form-control] to the <input>
• input bind to Gontrol

 

 

import {Component, View, FORM_DIRECTIVES, ControlGroup, Control} from 'angular2/angular2';


@Component({
    selector: 'field-form'
})
@View({
    directives: [FORM_DIRECTIVES],
    template: `
        <form [ng-form-model]="johnform">
            Title: <input type="checkbox" ng-control="title">
            Action: <input type="checkbox" ng-control="action">
        </form>
    `
})

export class FieldForm {
    johnform = new ControlGroup({
        title: new Control(true),
        action: new Control(true)
    });

    get selectedField(){
　　　　　// return ['title', 'action']　
        return Object.keys(this.johnform.controls)
            .filter((key)=>{
                return this.johnform.controls[key].value;
            })
    }
}

 

----------------------

import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2';
import {TodoService} from './todoService';
import {TodoItemRender} from './todoItemRender';
import {StartsWith} from './startsWith';
import {SimpleSearch} from './simpleSearch';
import {LetterSelect} from './letterSelect';
import {TodoSearch} from './todoSearch';
import {FieldForm} from './fieldForm';

@Component({
    selector: 'todo-list'
})
@View({
    pipes: [StartsWith, SimpleSearch],
    directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect, TodoSearch, FieldForm],
    template: `
          <div>
                <field-form #field-form></field-form>
                <todo-search #todo-search></todo-search>
                {{todoSearch.term}}
                <todo-item-render
                    *ng-for="#todo of todoService.todos
                    | simpleSearch: fieldForm.selectedField : todoSearch.term"
                    [todoinput]="todo"
                >
                </todo-item-render>
          </div>
          {{fieldForm.selectedField | json}}
    `
})