[Angular 2] A simple Form in Angular 2

When you create a form in Angular 2, you can easily get all of 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 ']returnObject.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} ' }})

[Angular 2] A simple Form in Angular 2