Question

我们的表单与很多组件（自定义表单控件）分离。我有一个组件来添加多个值，这个组件用作表单控件。可以使用

更新此表单控件

this.formGroup.patchValue();

但不能用

清空其值

this.formGroup.reset();

这是plunker中的代码 https://plnkr.co/edit/Xd3b0f8q0hn4eiNha367?p=preview 我的问题是， 因为＆＃34; valueOfMultipleSelector：Array＆＃34;是子组件的一部分，如何通过使用this.formGroup.patchValue（）从父组件更新其值？

Answer 1

这是因为JavaScript对象可变。数组是＆＃34;只是＆＃34;在JavaScript中的对象，我作为旁注提到，因为我们在这里处理数组。

那是什么意思？简而言之，multipleValuesList是对foodWePrefer的引用。因此无论这些阵列发生什么，都会影响另一个阵列。这就是为什么你的孩子会自动获得更新＆＃34;在父母中使用patchValue()时。

可以使用子组件中的@Input轻松演示可变性。如果将对象从父级传递给子级，则不需要在子级中使用@Output来更新父级！另一方面，如果您有一个不可变的字符串（以及其他原始类型），您的父母将不知道您在子项中所做的更改。这里的 DEMO 展示了这一点。

JS对象是可变的很重要，因为它可能导致不必要的行为，当你实际上不希望另一个变量在更改另一个变量时受到影响。也许你在修改孩子中的对象时实际上并不想让父母受到影响？

在这种情况下，执行会想要这种行为。

你说form.reset()没有重置孩子的表单，实际上会，你可以看到当你点击重置按钮时foodWePrefer变为空，这正是我们期望form.reset()

的行为

但你的意思是，这些项目不会从孩子的DOM中删除。

为什么？

这是因为这些项目存储在不同的数组中，即valueOfMultipleSelector。此数组对foodWePrefer和multipleValuesList都有否引用，因此当后两个数组中的任何一个发生更改时，它当然不会影响valueOfMultipleSelector阵列。

希望您了解我尝试解释的内容，并且您可以更好地了解代码中的内容:)

自定义表单控件的值可以使用formGroup的patchValue方法更新，但不会重置

1 个答案: