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