Angular FormGroup valueChanges 将属性转换为数组

Posted 2023-03-13

【中文标题】Angular FormGroup valueChanges 将属性转换为数组

【英文标题】：Angular FormGroup valueChanges converts properties to arrays

【发布时间】：2019-06-08 09:33:01

【问题描述】：

我正在关注 fromGroup 上的更改，但是，对于 formGroup 中的空/null 属性，它似乎会将它们转换为空数组。

我的 formGroup 实例化如下所示：

  static create(validators?: ValidatorFn[]): FormGroup 
    return new FormGroup(
      estimatedSpend: new FormControl(0),
      currency: new FormControl(0),
      department: new FormControl('')
    , validators);
  

没什么花哨的，只是添加了默认值。

当我查看 Chrome DevTools 时，formGroup 的值是正确的：

但是，当 valueChanges(...) 启动时，值会转换为空数组？

我在这里做错了吗，因为这种行为不符合预期。我应该通过 FormBuilder 来代替吗？

更新

  instantiateFormGroup(group: any): void 
    this.formGroup = new FormGroup(group);
  

这个方法是在一个基础组件中定义的，因为我有很多组件重复这个步骤。

在扩展我的基础的每个组件中，我都会执行以下操作：

  constructor(cdr: ChangeDetectorRef) 
    super(cdr);

    this.instantiateFormGroup(
      clientQuestions: ClientQuestionsDTOFormGroup.create()
    );
  

我在构造函数中这样做，因为我覆盖了默认路由器插座的激活方法来做特定的事情（完全不相关）。

.create() 方法：

export class ClientQuestionsDTOFormGroup 

  static create(validators?: ValidatorFn[]): FormGroup 
    return new FormGroup(
      estimatedSpend: new FormControl(0),
      currency: new FormControl(0),
      department: new FormControl('')
    , validators);
  

【问题讨论】：

this.formGroup = new formGroup(group); ，我几乎看不到这个。是否有可能获得更多代码来查看您绑定表单组的位置？我不知道这是什么方法，但您不应该这样做 this.formGroup = create(validator) 吗？

我想你确实想要返回 this.formGroup.get(name).valueChanges.susbcribe(...)。并记住在创建表单后调用函数 subscribeTochanges

@Eliseo，是的，正确的。我将 valueChanges 作为一个 observable 返回，它会冒泡到实现基本组件的每个组件。我只是想了解为什么我看到的是数组而不是我在 formGroup.create() 期间传递的默认值

@JadedEric，你写了“map”（我认为这是因为你得到了一个数组）-如果我们能看到你的函数 subscribeToChanges 会更容易-

【参考方案1】：

可能会出现团队中的开发人员提交的代码，该代码迭代原始数组的键，并将值替换为数组的值，并将这段代码添加为 FormGroup 对象的覆盖。

【讨论】：

我们都预测到了）

为什么要进行代码审查。将与团队的领导解决这个问题。感谢您的帮助。