Angularjs Angular2 GA/最终版本中控制组和控制组的替代方案是什么?
我在Angular2 RC1中开发了一个SPA,但由于最终版本现已发布,我的组织决定将代码移植到Angular2 GA。虽然我可以修复大部分损坏的东西,但我真的很难处理表单。Angularjs Angular2 GA/最终版本中控制组和控制组的替代方案是什么?,angularjs,angular,angular2-forms,Angularjs,Angular,Angular2 Forms,我在Angular2 RC1中开发了一个SPA,但由于最终版本现已发布,我的组织决定将代码移植到Angular2 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.\u updateTreeValidity不是一个函数。
模板中的特定行是
有什么想法吗
更新到当前角度(v4.0.1)
可以改用FormGroup
或FormBuilder
FormBuilder
只是FormGroup
的简写方法。对于较大/复杂的表单,建议使用So
上面显示的代码的问题是,您同时声明了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: '',
});
}
您的模板如下所示:
<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>
错误
这种方法的另一种选择是使用,[(ngModel)]=“someInput”
,但是,正是使用这种模式,我得到无法绑定到“FormControlName”,因为它不是“input”的已知属性。
;我必须使用“formControlName”=“controlname”
(在Angular 2.0.2中)。不过我还是得到了那个可爱的构造函数的双重激发。请确保您使用的是正确的FormModule imports
。请看这里提出的问题:代码实际上有一两个问题,但我已经用更正更新了答案。谢谢。谢谢你的编辑。我确实在组件中导入了REACTIVE\u FORM\u指令
(已经看到了该线程,但感谢您的链接)。我注意到双引号中有额外的单引号:这是为了转义它们,因为ng2会对“
中的内容进行求值吗?没问题。我相信formControlName将字符串作为参数。在我的代码中,我使用字符串数组来创建表单-这就是为什么我第一次忽略了这一点。