在RC6中升級到@ angular /形式

Question

我一直推遲從不推薦的表單api升級到@ angular/forms中的新表單api。我剛剛升級到RC6，並且現在也想開始使用@ angular/forms。

此時文檔非常稀少，而且我的速度非常快。

這是我的工作形式是什麼樣子：

<form [ngFormModel]="registrationForm" (ngSubmit)="register(registrationForm.value)"> 
    <fieldset class="form-group"> 
     <label for="email">Email address</label> 
     <input type="email" class="form-control" id="email" placeholder="email" [ngFormControl]="registrationForm.controls['email']" maxlength="128" required> 
    </fieldset> 
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.EmailExists"> 
     This email account is already linked to an account! <a [routerLink]="['/user/logon']">Go here to login</a>. 
    </div> 
    <fieldset class="form-group"> 
     <label for="username">User name</label> 
     <input type="text" class="form-control" id="username" placeholder="user name" [ngFormControl]="registrationForm.controls['username']" maxlength="32" required> 
    </fieldset> 
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.UsernameExists"> 
     This username is already taken! Please choose another one. 
    </div> 
    <div> 
     <button type="submit" class="btn btn-primary" [disabled]="!registrationForm.valid">register</button> 
    </div> 
</form> 

在與此模板關聯的組件，FORM_DIRECTIVES的成分，這是所提供的ngFormControl指令等的「指令」屬性指定。 ..

如果我理解正確，控制和ControlGroup被重命名爲FormControl和FormGroup，並且指令名稱也被重命名（ngFormControl等）。所以我更新了我的表格。我換成ngFormModel通過formGroup，並替換此：

[ngFormControl]="registrationForm.controls['email']"  

通過

formControlName="email" 

以這種形式得到的：

<form [formGroup]="registrationForm" (ngSubmit)="register(registrationForm.value)"> 
    <fieldset class="form-group"> 
     <label for="email">Email address</label> 
     <input type="email" class="form-control" id="email" placeholder="email" formControlName="email" maxlength="128" required> 
    </fieldset> 
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.EmailExists"> 
     This email account is already linked to an account! <a [routerLink]="['/user/logon']">Go here to login</a>. 
    </div> 
    <fieldset class="form-group"> 
     <label for="username">User name</label> 
     <input type="text" class="form-control" id="username" placeholder="user name" formControlName="username" maxlength="32" required> 
    </fieldset> 
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.UsernameExists"> 
     This username is already taken! Please choose another one. 
    </div> 
    <div> 
     <button type="submit" class="btn btn-primary" [disabled]="!registrationForm.valid">register</button> 
    </div> 
</form> 

但是這給了我這個錯誤：

Can't bind to 'formGroup' since it isn't a known property of 'form'.

我已經看了角碼，如果在一些評論中提到了一個示例，其中提到了導入REACTIVE_FORM_DIRECTIVES。但我無法導入（這是重新命名或刪除在RC6？），我期望，我已經有這個，因爲我的應用程序模塊導入FormsModule（不是說，爲什麼這個模塊的事情被介紹的原因？）：

@NgModule({ 
    imports:  [BrowserModule, FormsModule, HttpModule, appRouterRoot], 
    providers: [ApiService, LocalStorageService, AuthenticationService, UserService, ForumService], 
    declarations: [ 
     RootComponent, 
     RegistrationComponent, 
     [omitted some components for brevity ....] 
    ], 
    bootstrap: [RootComponent], 
}) 
export class AppModule {} 

有沒有人有任何想法如何進行？

編輯：所以，問題已被回答。但對於其他人做同樣的升級：

• 確保導入FormsModule和ReactiveFormsModule
• 更換[ngFormModel]由[formGroup]
• 添加formGroupName上的元素，以反映對照組
• 替換[ ngFormControl]通過formControlName

formControlname的值只是控件的名稱，你不需要指定組名稱正弦這是由formGrou處理pName屬性。

Answer 1

REACTIVE_FORM_DIRECTIVES在RC6中已被棄用和刪除。您需要導入FormsModule和ReactiveFormsModule：

@NgModule({ 
    import: [ 
    ..., 
    FormsModule, 
    ReactiveFormsModule 
    ] 
}) 

Answer 2

你可以找到這裏的新形式API一堆表格樣本： https://github.com/Farata/angular2typescript/tree/master/chapter7/form-samples

Answer 3

做進口ReactiveFormsModule也是在你的代碼。問題如您所說：REACTIVE_FORM_DIRECTIVES在RC6中已棄用。