在 RC6 中升级到 @angular/forms

Posted 2023-02-22

【中文标题】在 RC6 中升级到 @angular/forms

【英文标题】：Upgrading to @angular/forms in RC6

【发布时间】：2017-01-10 13:32:23

【问题描述】：

我一直在推迟从已弃用的表单 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 在组件的“directives”属性中指定，这就是提供 ngFormControl 指令等...

如果我理解正确，Control 和 ControlGroup 被重命名为 FormControl 和 FormGroup，指令名称也被重命名（ngFormControl 等）。所以我更新了我的表格。我用formGroup替换了ngFormModel，并替换了这个：

[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>

但这给了我这个错误：

无法绑定到“formGroup”，因为它不是“form”的已知属性。

我查看了角度代码，并在一些 cmets 中找到了一个示例，其中提到了导入 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 的值只是控件的名称，你不需要再指定组名，因为这是由 formGroupName 属性处理的。

【问题讨论】：

您不需要同时导入 FormsModule 和 ReactiveFormsModule。如果你做的是模板驱动，那么 FormsModule，如果你是模型驱动，那么 ReactiveFormsModule。

【参考方案1】：

REACTIVE_FORM_DIRECTIVES 在 RC6 中已弃用和删除。你需要导入FormsModule和ReactiveFormsModule：

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

【参考方案2】：

请在您的代码中导入 ReactiveFormsModule。问题如您所说：REACTIVE_FORM_DIRECTIVES 在 RC6 中已弃用。

【参考方案3】：

您可以在此处找到大量使用新表单 API 的表单示例： https://github.com/Farata/angular2typescript/tree/master/chapter7/form-samples