Question

我正在开发Angular2 RC1中的SPA，但是由于最终版本已经发布，我的组织决定将代码移植到Angular 2 GA。虽然我可以修复大部分破碎的东西，但我真的在与表格斗争在我之前使用RC1的代码中，我使用了ControlGroup和Control以及FormBuilder。我正在使用它们来做像验证这样的通常形式的东西，添加＆amp;删除控件等。但现在显然他们已被删除，我不知道是什么取代了他们我尝试了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">

有什么想法吗？

Answer 1

更新为当前的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"

Angular2 GA / Final Release中ControlGroup和Control的替代方案是什么？

1 个答案: