基于FormArray中的索引的Angular 4 patchValue [英] Angular 4 patchValue based on index in FormArray

问题描述

在用户将值添加到空创建的控件中后，我正在寻求更新formArray.

当前，当用户选择添加新项目时，我将使用空值构建到formArray上.

buildItem(item?: any, key?: any): FormGroup {
  // Item will pass undefined for initial buildItem in onLoad and new items
  let itemName: string;
  let keyValue: string;
  if (item === undefined) { 
     itemName = ''; key = '' }  
  else { 
     itemName = item.name; keyValue = key 
  };

  /**
   * Builds a single item for form group array in the collectionForm.
   */
   return this.formBuilder.group({ 
                item: [itemName || '', Validators.required], 
                properties: { item, key: key } || {} });
}

这对于初始创建和更新已添加的项目非常有用.问题在于添加了空值的新项目.当我添加新项目时，我需要在properties.key

中添加firebase的返回键

在保存新项目的方法中，我添加了patchValue

this.items.patchValue([{ 
         // item being returned from firebase promise
         item: item.name, 
         properties: { item: item.name, key: item.$key' } 
}]);

但是patchValue根本不起作用.当我尝试更新该新值时，尽管这些值已保存到firebase中，但仍会返回空值或在初始BuildItem()上设置的保存值，而不是在patchValue中更新的值

我在有角的FormArray文档

上看到了

它接受与控件结构匹配的数组，并且将尽最大努力将值与组中的正确控件匹配. REF

这是否意味着它可能会也可能不会更新该值..它将尽力而为?我想知道是否可以为要修补的值添加索引，那么这根本不是问题.就像removeAt(idx)

所以，如果我可以写类似

this.form.patchValue.atIndex(this.idx,[{ 
         item: item.name, 
         properties: { item: item.name, key: item.$key' } 
}];

但不确定我能做到这一点..相当肯定的是，这种形式是不可能的.有什么方法可以专门针对在formArray中修补的项目，或者我可能对此理解不正确.

我可以通过将新值推送到formArray

来解决这个问题

this.items.push(this.buildItem(...));

但是我必须添加

this.items.removeAt(this.idx); 

为了删除对空版本的初始控制，这似乎不是任何一种好的代码.

解决方案

使用 + > AbstractControl#patchValue :

this.items.at(index).patchValue(...);

I am looking to update a formArray after the user adds a value in an empty created control.

Currently when the user selects to add a new item i build onto the formArray with empty values.

buildItem(item?: any, key?: any): FormGroup {
  // Item will pass undefined for initial buildItem in onLoad and new items
  let itemName: string;
  let keyValue: string;
  if (item === undefined) { 
     itemName = ''; key = '' }  
  else { 
     itemName = item.name; keyValue = key 
  };

  /**
   * Builds a single item for form group array in the collectionForm.
   */
   return this.formBuilder.group({ 
                item: [itemName || '', Validators.required], 
                properties: { item, key: key } || {} });
}

This works fine for the initial creation and the update of items that are already added. The issue is with new items that are added with empty values. When i add a new item i need to add the return key from firebase in the properties.key

In the method for the save of that new item i added a patchValue

this.items.patchValue([{ 
         // item being returned from firebase promise
         item: item.name, 
         properties: { item: item.name, key: item.$key' } 
}]);

However the patchValue is not working at all. When i try the update that new value, although the values have been saved to firebase i still get a return for the values as empty or the save values set on the initial BuildItem() and not the updated values in the patchValue

I see on the angular FormArray Documentation that

It accepts an array that matches the structure of the control, and will do its best to match the values to the correct controls in the group. REF

Does that mean that it might and might not update that value .. it will just do its best to try? I figure if i can add the index for the value that i want to patch then it should not be a issue at all. like with the removeAt(idx)

So if i can write something like

this.form.patchValue.atIndex(this.idx,[{ 
         item: item.name, 
         properties: { item: item.name, key: item.$key' } 
}];

But not sure i can do that .. well pretty sure that it not possible in that form. Is there any way to specifically target the item that gets patched in a formArray or am i maybe not understanding this correctly.

I can sort of get away with this by pushing the new value onto the formArray

this.items.push(this.buildItem(...));

however then i have to add

this.items.removeAt(this.idx); 

In order to remove the initial control on the empty build , which does not seem like any sort of good code.

解决方案

Use FormArray#at + AbstractControl#patchValue:

this.items.at(index).patchValue(...);

这篇关于基于FormArray中的索引的Angular 4 patchValue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！