upgrade angular2 new ngForm ( RC3 )

將 angular2 升至 RC2 後，就出現了一段警告訊息：

*It looks like you're using the old forms module. This will be opt-in in the next RC, and will eventually be removed in favor of the new forms module. For more information, see: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

看來在 RC2 後，ngForm 做了一番修正，需要做一些破壞性的處理，
以下是將舊版 ngForm 升級至新版的步驟：
(目前已升至 RC3 )

1. main.ts 加入：

import { disableDeprecatedForms, provideForms } 
    from '@angular/forms';

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms() ]);

2. component 修改部分：

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgForm, Control}
    from '@angular/common';
...

@Component({ 
    directives: [FORM_DIRECTIVES]
})

修正為：

import {CORE_DIRECTIVES}    from '@angular/common';
import {REACTIVE_FORM_DIRECTIVES, FormControl, FormGroup}
    from '@angular/forms';
...
@Component({
    directives: [REACTIVE_FORM_DIRECTIVES]
})

3. form class 更名，尤其是有用 FormBuilder 做客製化驗證的部分：

REACTIVE_FORM_DIRECTIVES:

• formGroup (deprecated: ngFormModel) 
• formControl (deprecated: ngFormControl) 
• formControlName (deprecated: ngControl) 
• formGroupName (deprecated: ngControlGroup) 
• formArrayName (deprecated: ngControlGroup) 
• FormControl() (deprecated: Control) 
• FormGroup() (deprecated: ControlGroup) 
• FormArray() (deprecated: ControlArray) 
• FormBuilder (same) 
• Validators (same)

4. form control ( input, select...)，需加上 name attribute，
#name="ngForm" 要改為 #name="ngModel"：

<input type="text" class="form-control" required
                           [(ngModel)]="name"
                           ngControl="name"
                           #name="ngForm" />

修改為：

<input type="text" class="form-control" required
                           [(ngModel)]="name"
                           ngControl="name"
                           name="name"
                           #name="ngModel" />

5. ngFormModel, ngControl 修改部分 ( HTML )：

<form #templateForm="ngForm" 
          [ngFormModel]="_form" />
    <input type="text" class="form-control" required
                           [(ngModel)]="TemplateName"
                           pattern="^[a-zA-Z0-9_.\-\u4e00-\u9fa5-\(-\)\s]+$"
                           ngControl="TemplateName" />

</form>

修改為：

<form #templateForm="ngForm" 
          [formGroup]="_form" />
    <input type="text" class="form-control" required
                           name="TemplateName"
                           [(ngModel)]="TemplateName"
                           pattern="^[a-zA-Z0-9_.\-\u4e00-\u9fa5-\(-\)\s]+$"
                           formControlName="TemplateName" />

</form>

6. ngFormModel, ngControl 修改部分 ( typescript)：：

_form: ControlGroup;
constructor(
        @Inject(FormBuilder) fb: FormBuilder
    ) {
        this._addTemplateForm = fb.group({
            TemplateName: ['', Validators.required]
        })
    }

修改為：

_form: FormGroup;
constructor(
        @Inject(FormBuilder) fb: FormBuilder
    ) {
        this._addTemplateForm = fb.group({
            TemplateName: ['', Validators.required]
        })
    }

升級步驟大致如上，希望可以幫助到各位囉！