<form novalidate>
 <label>
 <span>Full name</span>
 <input
 type="text"
 name="name"
 placeholder="Your full name">
 </label>
 <div>
 <label>
 <span>Email address</span>
 <input
 type="email"
 name="email"
 placeholder="Your email address">
 </label>
 <label>
 <span>Confirm address</span>
 <input
 type="email"
 name="confirm"
 placeholder="Confirm your email address">
 </label>
 </div>
 <button type="submit">Sign up</button>
</form>

// signup.interface.ts
export interface User {
 name: string;
 account: {
 email: string;
 confirm: string;
 }
}

import { FormsModule } from '@angular/forms';

@NgModule({
 imports: [
 ...,
 FormsModule
 ],
 declarations: [...],
 bootstrap: [...]
})
export class AppModule {}

import { Component } from '@angular/core';

@Component({
 selector: 'signup-form',
 template: `
 <form novalidate>...</form>
 `
})
export class SignupFormComponent {
 constructor() {}
}

import { User } from './signup.interface';

@Component({...})
export class SignupFormComponent {
 public user: User = {
 name: '',
 account: {
 email: '',
 confirm: ''
 }
 };
}

<form novalidate #f="ngForm">
 <label>
 <span>Full name</span>
 <input type="text" placeholder="Your full name">
 </label>
</form>

@Directive({
 selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]',
 providers: [formDirectiveProvider],
 host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
 outputs: ['ngSubmit'],
 exportAs: 'ngForm'
})
export class NgForm extends ControlContainer implements Form {}

{{ f.value | json }} // {}

<form novalidate #f="ngForm">
 ...
 <input
 type="text"
 placeholder="Your full name"
 name="name"
 ngModel>
 ...
</form>

{{ f.value | json }} // { name: '' }

...
user: User = {
 name: 'Semlinker',
 account: {
 email: '',
 confirm: ''
 }
};
...

<form #f="ngForm">
 ...
 <input
 type="text"
 placeholder="Your full name"
 name="name"
 [ngModel]="user.name">
 ...
</form>

{{ f.value | json }} // { name: 'Semlinker' }

<form #f="ngForm">
 ...
 <input
 type="text"
 placeholder="Your full name"
 name="name"
 [(ngModel)]="user.name">
 ...
</form>

{{ user | json }} // { name: 'Semlinker' }

<input [(ngModel)]="user.name">
<input [ngModel]="user.name" (ngModelChange)="user.name = $event">

<form novalidate #f="ngForm">
 <label>
 <span>Full name</span>
 <input
 type="text"
 placeholder="Your full name"
 name="name"
 ngModel>
 </label>
 <div ngModelGroup="account">
 <label>
 <span>Email address</span>
 <input
 type="email"
 placeholder="Your email address"
 name="email"
 ngModel>
 </label>
 <label>
 <span>Confirm address</span>
 <input
 type="email"
 placeholder="Confirm your email address"
 name="confirm"
 ngModel>
 </label>
 </div>
 <button type="submit">Sign up</button>
</form>

ngForm -> '#f'
 ngModel -> 'name'
 ngModelGroup -> 'account'
   -> ngModel -> 'email'
   -> ngModel -> 'confirm'

// { name: 'Semlinker', account: { email: '', confirm: '' } }
{{ f.value | json }}

<form novalidate (ngSubmit)="onSubmit(f)" #f="ngForm">
 ...
</form>

export class SignupFormComponent {
 user: User = {...};
 onSubmit({ value, valid }: { value: User, valid: boolean }) {
 console.log(value, valid);
 }
}

<form novalidate (ngSubmit)="onSubmit(f)" #f="ngForm">
 ...
 <button type="submit" [disabled]="f.invalid">Sign up</button>
</form>

<form novalidate #f="ngForm">
 <label>
 ...
 <input
 ...
 ngModel
 required>
 </label>
 <div ngModelGroup="account">
 <label>
 ...
 <input
 ...
 name="email"
 ngModel
 required>
 </label>
 <label>
 ...
 <input
 ...
 name="confirm"
 ngModel
 required>
 </label>
 </div>
 <button type="submit">Sign up</button>
</form>

<form novalidate #f="ngForm">
 {{ f.controls.name?.errors | json }}
</form>

<div *ngIf="f.controls.name?.required" class="error">
 Name is required
</div>

<label>
 ...
 <input
 ...
 #userName="ngModel"
 required>
</label>
<div *ngIf="userName.errors?.required" class="error">
 Name is required
</div>

<div *ngIf="userName.errors?.required && userName.touched" 
 class="error">
 Name is required
</div>

<!-- name -->
<div *ngIf="userName.errors?.required && userName.touched" 
 class="error">
 Name is required
</div>
<div *ngIf="userName.errors?.minlength && userName.touched" 
 class="error">
 Minimum of 2 characters
</div>

<!-- account: { email, confirm } -->
<div *ngIf="userEmail.errors?.required && userEmail.touched" 
 class="error">
 Email is required
</div>
<div *ngIf="userConfirm.errors?.required && userConfirm.touched" 
 class="error">
 Confirming email is required
</div>

<div ngModelGroup="account" #userAccount="ngModelGroup">
 <label>
 <span>Email address</span>
 <input
 type="email"
 placeholder="Your email address"
 name="email"
 ngModel
 required>
 </label>
 <label>
 <span>Confirm address</span>
 <input
 type="email"
 placeholder="Confirm your email address"
 name="confirm"
 ngModel
 required>
 </label>
 <div *ngIf="userAccount.invalid && userAccount.touched" class="error">
 Both emails are required
 </div>
</div>

// angular2/packages/forms/src/directives/ng_model.ts 片段
@Directive({
 selector: '[ngModel]:not([formControlName]):not([formControl])',
 providers: [formControlBinding],
 exportAs: 'ngModel' // // 导出指令实例，使得可以在模板中调用
})
export class NgModel extends NgControl implements OnChanges, OnDestroy {
}

// angular2/packages/forms/src/directives/ng_control.ts 片段
export abstract class NgControl extends AbstractControlDirective {
 /** @internal */
 _parent: ControlContainer = null;
 name: string = null;
 valueAccessor: ControlValueAccessor = null;
 ...
 abstract viewToModelUpdate(newValue: any): void;
}

// angular2/packages/forms/src/directives/abstract_control_directive.ts 片段
export abstract class AbstractControlDirective {
 get valid(): boolean { return this.control ? this.control.valid : null; }

 get invalid(): boolean { return this.control ? this.control.invalid : null; }

 get errors(): ValidationErrors | null { return this.control ? 
 this.control.errors : null; }

 get pristine(): boolean { return this.control ? this.control.pristine : null; }

 get dirty(): boolean { return this.control ? this.control.dirty : null; }

 get touched(): boolean { return this.control ? this.control.touched : null; }

 get untouched(): boolean { return this.control ? this.control.untouched : null; }

 get valueChanges(): Observable<any> { return this.control ? 
 this.control.valueChanges : null; }

 hasError(errorCode: string, path: string[] = null): boolean {
 return this.control ? this.control.hasError(errorCode, path) : false;
 }

 getError(errorCode: string, path: string[] = null): any {
 return this.control ? this.control.getError(errorCode, path) : null;
 }
}

<form #concatForm = "ngForm">
 <fieldset ngModelGroup="nameGroup" #nameGroup="ngModelGroup">
 <label>姓:</label>
 <input type="text" name="firstname" [(ngModel)]="curContact.firstname" 
  required> 
  <label>名字:</label>
 <input type="text" name="lastname" [(ngModel)]="curContact.lastname" 
  required>
 </fieldset>
 <fieldset ngModelGroup="addressGroup" #addressGroup ="ngModelGroup">
 <label>街:</label>
 <input type="text" name="street" [(ngModel)]="curContact.street" required>  <label>区:</label>
 <input type="text" name="zip" [(ngModel)]="curContact.zip" required> 
 <label>城市:</label>
 <input type="text" name="city" [(ngModel)]="curContact.city" required>
 </fieldset>
</form>

{
 nameGroup: {
 firstname: ''，
 lastname: ''，
 }，
 addressGroup: { 
 street: ''， 
 zip: ''， 
 city: ''
 } 
}