我不久前开始在Angular 9上进行编码,并且正在创建一个Reactive Form,该表单具有通过FormArray Abstract动态添加的表单控件,但是每当我尝试遍历formArray控件的value属性时,我都会得到此信息我一直试图找出将近12个小时的不可思议的怪异错误。当我在value节点下只有一个数组条目时,不会出现此错误。有人可以指出做错了什么吗?
这里是错误:
这里是我组件的函数调用:
getSelectedItemsSum(){
let quotesTotal = 0;
let itemsgroupAmt = 0;
let itemsgroupQty = 0;
let itemsgroup = this.itemsgroup();
if(itemsgroup.touched == true && itemsgroup.status !== 'INVALID'){
if(itemsgroup.value.length > 1){
console.log(itemsgroup.value);
for(let i = 0; i <= itemsgroup.value.length; i++){
if((itemsgroup.value[i].amount != '' || itemsgroup.value[i].amount != 0) && (itemsgroup.value[i].quantity != '' || itemsgroup.value[i].quantity != '')){
itemsgroupAmt += itemsgroup.value[i].amount;
itemsgroupQty += itemsgroup.value[i].quantity;
}
}
quotesTotal = (itemsgroupAmt * itemsgroupQty);
}else{
if((itemsgroup.value[0].amount != '' || itemsgroup.value[0].amount != 0) && (itemsgroup.value[0].quantity != '' || itemsgroup.value[0].quantity != 0))
quotesTotal = (parseInt(itemsgroup.value[0].amount) * parseInt(itemsgroup.value[0].quantity));
}
}else return;
console.log(itemsgroup)
}
这是itemsgroup() function
itemsgroup() : FormArray{
return this.quotationForm.get('itemsgroup') as FormArray;
}
我的html模板的代码段:
<div formArrayName="itemsgroup" class="row row-xs mb-2">
<div *ngFor="let group of itemsgroup().controls; let i = index" class="col-xl-12">
<div [formGroupName]="i" class="row row-xs mb-2 relative">
<div class="col-md-4">
<input type="text" formControlName="item" placeholder="Item {{i + 1}}" class="form-control" required>
</div>
<div class="col-md-4">
<input
type="number"
formControlName="quantity"
placeholder="Quantity {{ i + 1 }}"
min="1" step="1" value="1"
class="form-control" required>
</div>
<div class="col-md-4">
<input
(change)="getSelectedItemsSum()"
type="number"
formControlName="amount"
placeholder="Amount {{ i + 1 }}"
class="form-control" required>
</div>
<button
(click)="removeItemGroup(i)"
*ngIf="(i >= 1)"
mat-fab
mat-stroked-button
color="primary"
matTooltip="Delete Item Group"
style="position:absolute;right:7px;top:17px;width:22px;height:22px;">
<i style="position:absolute;top:5px;left:8px">*</i>
</button>
</div>
</div>
</div>
请更改
let i = 1
而不是let i = 0
,因为在for循环中使用小于等于i<=itemgroup.value.length
。
如下更改循环条件,
for (let i = 1; i <= itemgroup.value.length; i++)
{
// your code
}
或
for (let i = 0; i < itemgroup.value.length; i++)
{
// your code
}
itemsgroup()
的名称,您的方法和formArray具有相同的名称。在模板中将<div *ngFor="let group of itemsgroup().controls; let i = index" class="col-xl-12">
更改为
<div *ngFor="let group of quotationForm.get('itemsgroup').controls; let i = index" class="col-xl-12">