angularjs – Angular2 GA / Final Release中ControlGroup和Cont

发布时间：2020-12-17 17:26:58 所属栏目：安全来源：网络整理

导读：我在Angular2 RC1中开发了一个SPA,但是由于最终版本已经发布,我的组织决定将代码移植到Angular 2 GA.虽然我可以修复大部分破碎的东西,但我真的在与表格斗争. 在我之前使用RC1的代码中,我使用了ControlGroup和Control以及FormBuilder.我正在使用它们来做像验

我在Angular2 RC1中开发了一个SPA,但是由于最终版本已经发布,我的组织决定将代码移植到Angular 2 GA.虽然我可以修复大部分破碎的东西,但我真的在与表格斗争.
在我之前使用RC1的代码中,我使用了ControlGroup和Control以及FormBuilder.我正在使用它们来做像验证这样的通常形式的东西,添加&删除控件等.但现在显然他们已被删除,我不知道是什么取代了他们.
我尝试了API指南FormControl或FormGroup中的一些其他类,但两者都没有真正帮助.我想知道上面两个班级的替代品是什么.

编辑：FormControl和FormGroup消除了TypeScript文件中的错误,但是,在标记中,我得到内联模板：0：0引起：没有FormBuilder的提供者！错误.

更新：我可以使用FormGroup,FormControl和FormBuilder.通过将ReactiveFormsModule添加到app.module.ts文件来解决上述错误.但是,我得到一个错误的内联模板：30：61导致：this.form._updateTreeValidity不是一个函数.
模板中的特定行是
< form#userForm =“ngForm”(ngSubmit)=“submitUser()”[formGroup] =“userForm”novalidate autocomplete =“off”>

有任何想法吗？

解决方法

Updated to current Angular (v4.0.1)

可以使用FormGroup或FormBuilder. 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”的地方

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!