[Angular 2] ng-control & ng-control-group

Control:

Controls encapsulate the field's value, a states such as if it is valid, dirty or has errors.

var nameControl = new Control("Nate");
var name = nameControl.value; // -> Nate

nameControl.errors // -> StringMap<string, any> of errors
nameControl.dirty // -> false
nameControl.valid // -> true

ControlGroup:

A way to manage multiple Controls.

var personInfo = new ControlGroup({
firstName:  new Control("Nate"),
lastName: new Control("Murray"),
zip: new Control('90210')
});

personInfo.value; // ->{
//firstName: "Nate",
//lastName: "Murray",
//zip: "90210"
}

personInfo.errors // -> StringMap<string, any> of errors
personInfo.dirty // -> false
personInfo.valid // -> true

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

@Component({
selector: 'demo-form-sku'
})
@View({
directives: [FORM_DIRECTIVES],
template: `
<div>
<h2>Demo Form: Sku</h2>
<!-- ngForm is attched to the form, and #f="form" form is also come from ngForm-->
<form #f = "form"
(submit)="onSubmit(f.value)">
<div class="form-group">
<label for="skuInput">SKU</label>
<input type="text"
class="form-control"
id="skuInput"
placeholder="SKU"
ng-control="sku">
</div>

<button type="submit" class="btn btn-default">
Submit
</button>
</form>
</div>
`
})

export class DemoFormSku {
constructor() {

}

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