【问题标题】:Angular 5 reactive form - patchValue with FormArray not workingAngular 5反应形式-FormArray的patchValue不起作用
【发布时间】:2018-10-26 18:10:35
【问题描述】:

我在 Ionic3 框架中有这种反应形式,我需要用从 API 检索到的数据来填充它。为此,我使用patchValue,因为我在某处读到它比setValue 更可靠。

我面临的问题是,它不会填充重复的表单字段。为了更好地解释,我创建了这个example code

我尝试了其他方法,例如直接将数据分配给相应的字段,而不是首先使用 for 循环,但这只填充了 1 组而不是全部 3 组。

有人可以指出我做错了什么,或者提供更好的解决方案吗?

谢谢

【问题讨论】:

  • 您的代码运行良好。只是你的 populate 方法创建了新的 FormGroups 并用 patchValue() 填充它们,但从不将这些新的表单组推送到表单数组。
  • patchValue() 不是“更可靠”。它的作用与 setValue() 不同。 setValue 期望一个完整的新值(包含表单的每个控件的新值),而 patchValue 期望一个部分新值(包含表单的某些控件的新值)。
  • 谢谢@JBNizet

标签: angular ionic3 angular-reactive-forms formarray


【解决方案1】:

在您的示例中,将 home 组件上的 for 循环设置为如下所示

for(const rooms of resp.room_data){

      const roomNumberControl = this.createRooms();
      (<FormArray>this.informationForm.controls.room_numbers).push
      (roomNumberControl);
      console.log(JSON.stringify(rooms));
    }

创建房间只需要在其中包含一些数据,但这将为阵列中的每个人创建对象。这就是我过去的做法。

【讨论】:

  • 谢谢你,这就像魅力一样,但它使第一个字段为空。你能告诉我如何解决这个问题吗? stackblitz.com/edit/ionic-c5vapg
  • 从第 17 行删除 this.createRooms() 表单初始化后,您将使用 vaule 填充它
  • 我太傻了,再次感谢你。你拯救了我的一天
  • 当然可以,很高兴我能帮上忙。
猜你喜欢
  • 1970-01-01
  • 2021-07-07
  • 2021-02-17
  • 1970-01-01
  • 2019-12-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-09-11
相关资源
最近更新 更多