当前位置: 首页 > Web前端 > HTML

在Angular中使用嵌套Form的步骤

时间:2023-04-02 23:21:00 HTML

我们可以在FormGroup构造函数的属性中再添加一个FormGroup类型的实例,组成一个嵌套表单:每次显式调用new创建FormGroup和FormControl实例,看起来很繁琐。其实我们可以通过工厂模式使用FormBuilder来创建。profileForm=this.fb.group({firstName:['Jerry'],lastName:['LastName'],address:this.fb.group({street:[''],city:['']}),});作用:冒号后的参数类型为JSON数组,第一个参数为默认初始值,第二个参数为验证器。使用示例如下:当lastName不维护值时,整个表单处于ng-invalid状态。无法单击提交按钮。嵌套组的状态将冒泡到父表单。它的状态可以直接通过FormGroup.status访问。this.profileForm.valueChanges.subscribe(value=>{console.log('groupvalue:',value,'status:',this.profileForm.status);});如果我们事先不知道要创建的表单控件实例的确切数目,使用动态控件是一个不错的选择。所谓动态控件,就是我们不需要为每个控件显式指定key。一个实际的例子:aliases:this.fb.array([this.fb.control('')])创建一个getteraccessor,通过代码的方式获取上面创建的动态控件:getaliases(){returnthis.profileForm.get('aliases')asFormArray;}因为this.profileForm.get('aliases')返回的控件类型是抽象数据类型AbstractControl,所以你为这个方法提供一个明确的类型声明来访问FormArray-specific句法。动态添加匿名组件的方法:addAlias(){this.aliases.push(this.fb.control(''));}

别名

+添加另一个别名Alias:
最终效果:这些匿名控件的值通过以下方式打印出来:onSubmit(){console.warn(this.profileForm.value);}通过formArrayName和formControlName给这些匿名控件赋索引值,这样就可以通过索引访问控件的内容了: