the*_*man 4 angularjs angular2-forms angular
我在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">
有任何想法吗?
已更新至当前的Angular(v4.0.1)
FormGroup或者FormBuilder可以代替使用.FormBuilder简直就是一种简单的方法FormGroup.因此建议用于较大/复杂的表格.
您在上面显示的代码的问题是您声明FormGroup和ngModel- #userForm="ngForm",这对我的理解不能一起使用 - 不管怎样都不容易 ......我也犯了这个错误.
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: '',
});
}
Run Code Online (Sandbox Code Playgroud)
你的模板是这样的:
<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>
Run Code Online (Sandbox Code Playgroud)
这种方法的替代方法是使用Angular的模板驱动表单,这是您将使用的方法[(ngModel)]="someInput"
| 归档时间: |
|
| 查看次数: |
4642 次 |
| 最近记录: |