升级到RC6中的@angular/forms

Question

我一直在推迟从已弃用的表单api升级到@angle/form中的新表单api。我刚刚升级到RC6，现在也想开始使用@angle/form。

文档在这一点上非常稀缺，我很快就被卡住了。

这是我的工作形式：

<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是在组件的“DIRECTIVES”属性中指定的，这就是提供ngFormControl指令等的原因...

如果我理解正确的话，Control和ControlGroup被重命名为FormControl和FormGroup，并且指令名也被重命名(ngFormControl等)。所以我更新了我的表格。我将ngFormModel替换为formGroup，并替换为:

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

by

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>

但这给了我这个错误：

无法绑定到“formGroup ”,因为它不是“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以反映控制组
• 用formControlName替换[ngFormControl]

窗体控件名的值只是控件的名称，您不再需要指定组名，因为这将由 formGroupName 属性处理。

Answer 1

您可以在此处找到一系列具有新forms API的表单示例：https://github.com/Farata/angular2typescript/tree/master/chapter7/form-samples

Answer 2

也请在代码中导入反应式表单模块。正如你所说，问题就在于：RC6中不推荐使用REACTIVE_FORM_DIRECTIVES。

Answer 3

在RC6中，< code > REACTIVE _ FORM _ DIRECTIVES 已被弃用并被删除。您需要导入< code>FormsModule和< code>ReactiveFormsModule:

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