如何将 Angular 2 RC 1（或更早版本）表单迁移到 Angular 2 RC 2 / RC 4 新表单

Posted 2023-02-22

【中文标题】如何将 Angular 2 RC 1（或更早版本）表单迁移到 Angular 2 RC 2 / RC 4 新表单

【英文标题】：How to migrate Angular 2 RC 1 (or earlier) Forms to Angular 2 RC 2 / RC 4 New Forms

【发布时间】：2016-10-18 16:24:50

【问题描述】：

我需要将我现有的 Angular 2 RC 1 应用程序迁移到 Angular 2 RC 4。作为其中的一部分，我还需要将我现有的表单移动到 Angular 2 RC 4 新表单。

谁能指导一下，如何将现有表单更新为新表单。

【问题讨论】：

验证器有什么问题？你能在 Plunker 中复制吗？您可以使用plnkr.co/edit/ir19tuktTqcfGeG8pu2G?p=preview 作为模板。

自定义验证器要求输入的结果与验证器名称不正确时相同，因此结果将返回 "numeric": true ;除此之外，您不需要自定义验证器，因为 Pattern 是 RC1 的标准验证器之一。

【参考方案1】：

对于那些在将表单从 Angular 2 RC 1（或更早版本）迁移到 Angular 2 RC 2 / RC 4 新表单时遇到问题的人。以下是他们需要遵循的步骤：

通过将以下包添加到他们的 packages.json 中，在您的项目中包含新表单：

"@angular/forms": "0.2.0",

接下来，他们必须禁用主文件中已弃用的表单并包含如下新表单：

import disableDeprecatedForms, provideForms from '@angular/forms';
bootstrap(AppComponent, [
   disableDeprecatedForms(),
   provideForms()
])

然后在他们的组件中为新的表单指令添加导入：

import  REACTIVE_FORM_DIRECTIVES, FormControl, FormGroup, FormBuilder, Validators  from '@angular/forms';

为组件包含 REACTIVE_FORM_DIRECTIVES：

directives: [REACTIVE_FORM_DIRECTIVES],

在您的组件中重命名以下内容：

ControlGroup > FormGroup
Control > FormControl

在您的模板中重命名以下内容：

ngFormModel > formGroup
ngControl > formControlName

我希望这会有所帮助。

【讨论】：

这里还有比较重要的变化...请参考：docs.google.com/document/u/1/d/…

谢谢Baumi，你是对的，即使我真的关注了那个帖子:)