Angular2 GA/Final Release 中的 ControlGroup 和 Control 的替代方案是啥?

Posted

技术标签:

【中文标题】Angular2 GA/Final Release 中的 ControlGroup 和 Control 的替代方案是啥?【英文标题】:What is the alternative of ControlGroup and Control in Angular2 GA/Final Release?Angular2 GA/Final Release 中的 ControlGroup 和 Control 的替代方案是什么? 【发布时间】:2017-02-01 00:15:51 【问题描述】:

我在 Angular2 RC1 中开发了一个 SPA,但是由于最终版本现已发布,我的组织决定将代码移植到 Angular 2 GA。虽然我可以修复大部分损坏的东西,但我真的在表单上苦苦挣扎。 在我早期的 RC1 代码中,我使用了 ControlGroup 和 Control 以及 FormBuilder。我正在使用它们来执行通常的表单操作,例如验证、添加和删除控件等。但是现在显然它们已被删除,我不知道是什么取代了它们。 我尝试了 API 指南 FormControl 或 FormGroup 中的其他一些类,但都没有真正帮助。我想知道以上两个类的替代品是什么。

编辑: FormControl 和 FormGroup 已消除 TypeScript 文件中的错误,但是,在标记中,我收到 inline template:0:0 caused by: No provider for FormBuilder! 错误。

更新:我可以使用 FormGroup、FormControl 和 FormBuilder。通过将 ReactiveFormsModule 添加到 app.module.ts 文件可以解决上述错误。但是,我收到一个错误inline template:30:61 caused by: this.form._updateTreeValidity is not a function. 模板中的特定行是<form #userForm="ngForm" (ngSubmit)="submitUser()" [formGroup]="userForm" novalidate autocomplete="off">

有什么想法吗?

【问题讨论】:

【参考方案1】:

更新到当前的 Angular (v4.0.1)

可以使用FormGroupFormBuilder 代替。 FormBuilder 只是FormGroup 的简写方法。所以建议用于较大/复杂的表格。

您上面显示的代码的问题是您同时声明了 FormGroup 和 ngModel-#userForm="ngForm",据我了解,它们不能一起使用-not easily anyway...我也犯了这个错误。

private myForm: FormGroup;

constructor()
    this.myForm = new FormGroup(
        name: new FormGroup(
            first: new FormControl('Nancy', Validators.required),
            last: new FormControl('Drew')
        ),
        email: new FormControl('')
    );


//The same thing using 'FormBuilder': (Note this would not change the template)
constructor(@Inject(FormBuilder) fb: FormBuilder) 
    this.myForm = fb.group(
        name: fb.group(
            first: ['Nancy', Validators.required],
            last: 'Drew',
        ),
        email: '',
    );

你的模板是这样的:

<form [formGroup]="myForm" novalidate autocomplete="off">
    <div formGroupName="name" novalidate autocomplete="off">
        <input type="text" formControlName="first"/>
        <input type="text" formControlName="last"/>
        <span [hidden]="myForm.controls['name'].valid">Error</span>
    </div>
    <input type="text" formControlName="email"/>
</form>

这种方法的替代方法是使用Angular's Template Driven Forms,这是您将使用[(ngModel)]="someInput"的地方

【讨论】:

然而,正是使用这种模式,我得到了Can't bind to 'FormControlName' since it isn't a known property of 'input';我不得不使用"formControlName"="control-name"(在 Angular 2.0.2 中)。我仍然得到那个可爱的构造函数双重射击。 确保您使用的是正确的FormModule imports。请参阅此处提出的问题:Can't bind to 'formGroup' since it isn't a known property of 'form' 代码实际上存在一两个问题,但我已通过更正更新了答案。谢谢。 感谢您的编辑。我确实在组件中导入了REACTIVE_FORM_DIRECTIVES(已经看到该线程,但感谢您提供链接)。我注意到双引号内有额外的单引号:这是为了逃避它们,因为 ng2 evals 里面的东西 " 没问题。我相信 formControlName 将字符串作为参数。在我的代码中,我使用一个字符串数组来创建表单——这就是我第一次错过这个的原因。

以上是关于Angular2 GA/Final Release 中的 ControlGroup 和 Control 的替代方案是啥?的主要内容,如果未能解决你的问题,请参考以下文章

动态加载现有组件 Angular 2 Final Release

CSS发布Ngx-table angular2泳道

Angular 2 Http 删除与 Web API REST 一起使用的标头

Angular 2.0 发布:管道和指令不再是 @Component 的属性

带有spring-boot安全休息api的角度2

如何在本地主机上启用 Spring 和 Angular 2 之间的 CORS