java form array_Angular2 Formbuilder - 引用FormArray元素

我们有一个表单,它接受服务响应,以便使用正确的字段名称填充表(我们的FormArray) . 给定正确的表单字段名称,我们尝试使用对另一个数据库的另一个服务调用来填充某些参数的字段 .

一个简单的例子:

ngOnInit() {

this.myForm = this._fb.group({

name: [''],

myArray: this._fb.array([])

}),

initArray();

}

private initArray(){

this.arrayValsService.getValues.subscribe(

response => {

for (item of response) {

let arrayItemGroup = this.createItemGroup(item.code, item.value);

const control = this.myForm.controls['myArray'];

control.push(arrayItemGroup);

}

},

err => {console.error(err);}

};

}

private createItemGroup(code: string, value: string) {

return this._fb_group({

selected: [false],

itemCode: [code],

itemValue: [value],

otherVal1: [''],

otherVal2: ['']

});

}

private setArray() {

if(this.key !== undefined) {

this.dataService.getData(this.key).subscribe(

response => {

this.myForm.patchValue(response);

for (let resItem of response.itemsSet) {

for (let formItem of this.myForm.controls['myArray']) {

if (formItem.controls.itemCode === resItem.code) { // <== ISSUE HERE

formItem.patchValue(response.itemsSet.resItem);

formItem.controls.selected.setValue(true);

}

}

}

err => {console.error(err);}

);

}

}

我在控制台中收到一个错误,我们'无法读取未定义的属性'控件',发生在上面标记的行上 . 我需要引用数组中的各个表单控件组,以便相应地更新它们的值 . 我没有使用嵌套的for循环,而是尝试使用array.find来检查数组元素组中的特定控件:

const control = (this.myForm.controls['myArray'])

.find(item => myArray.controls.item.itemCode === resItem.code)

这也行不通;遇到相同的问题,控件是未定义的属性 . 最重要的是,我需要一种方法来引用formArray的子元素和每个子元素的控件 .

下面的方法适用于迭代formArray.controls数组对象,但仍会产生一个typescript编译错误:

for (let resItem of response.itemsSet) {

const control = this.myForm.controls['myArray'].controls

.find((item:any) => item.value.itemCode === resItem.code);

if(control) {control.controls.selected.setValue(true); // ...other value updates

control 是一个数组对象,所以.find()在这里工作 . 在 ['myArray'].controls 的子类型(FormGroup类型)中,还有另一个数组对象child.value,其中包含我正在比较服务响应的代码 . 从功能上讲,这是在完成预期的工作;但是,我'm still receiving an error: '错误TS2329:属性'controls'在类型'AbstractControl'上不存在 .

最终编辑以供将来参考:

类型化FormArray本身和FormGroup I 'm '发现'在删除初始打字稿错误方面是有效的 . 但是,在执行此操作时,我正在更新的表单控件开始抛出相同的"property 'control' on type 'AbstractControl'"错误 . 我根据this question更改了引用特定控件的格式 .

最后结果:

for (let resItem of response.itemsSet) {

const control = ((((this.myForm.controls['myArray'])).controls

.find((item:any) => item.value.itemCode === resItem.code)));

if(control) {control.controls['selected']setValue(true); // ...other value updates

Key takeaways: typecasting FormGroups, FormArrays; referencing explicitly named controls with ['control'] format.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值