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

问题描述

我希望在用户在创建的空控件中添加值后更新 formArray.

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

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

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 } || {} });
}

这适用于初始创建和已添加项目的更新.问题在于添加了空值的新项目.当我添加一个新项目时，我需要在 properties.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

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

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' } 
}]);

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

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

我在角度 FormArray 文档中看到

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

这是否意味着它可能会也可能不会更新该值..它只会尽力尝试?我想如果我可以为我想要修补的值添加索引，那么它根本不应该是一个问题.就像 removeAt(idx)

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' } 
}];

但不确定我能做到这一点……很确定它不可能以那种形式出现.有什么方法可以专门针对在 formArray 中打补丁的项目，或者我可能没有正确理解这一点.

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.

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

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

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

但是我必须添加

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.

推荐答案

使用 FormArray#at + AbstractControl#patchValue:

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

演示

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