迭代反应式表单控件答案

【问题标题】：Iterate over reactive form controls迭代反应式表单控件
【发布时间】：2019-05-30 22:23:20
【问题描述】：

基本上我想将所有响应式表单值保存在会话存储中，刷新时我想从会话存储中获取值以显示在表单中。

所以我要做的是迭代反应式表单控件，并从这些值构造一个对象

该对象可以设置为this.form.patchValue(object);

我想遍历我的响应式表单中的每个表单控件并创建一个结构化对象。

例如：

profileForm = new FormGroup({
    firstName: new FormControl(''),
    phoneNo: new FormControl(''),
    selectedService : FormArray('')
    gender:new FormControl(''),
  });

在这种情况下，selectedService 派生自多个复选框。然后我想创建一个这样的对象：

键和值

{
    firstname: "john" 
    phoneNo: "12344567"
    selectedService : {
        service1: true,
        service2: false,
        service3: true
    }
    gender : "male"
}

这是我尝试过的，但我未能为 formArray 创建嵌套对象

getFormFieldsValue(formControl: any): void {
    Object.keys(formControl.controls).forEach((controlName) => {
      const control = formControl.controls[controlName];
      if (control.controls) {
        this.getFormFieldsValue(control);
      } else {
        this.createObject(controlName, control);
      }
    });
  }

  createObject(controlName: any, controlValue: any): any {
    if (controlValue.value) {
      this.objects[controlName] = controlValue.value;
    }
  }

【问题讨论】：

您是否尝试过 console.log(this.profileform.value) 理想情况下，表单本身应该为您提供所需的对象作为其值，我们设计反应式表单以使其返回表单中的值的对象。例如 formGroup 返回对象，表单控件返回原语，formArray 返回 Array
@AkshayRajput - 请参阅下面的答案 cmets。
如果需要修改表单的一部分可以使用patch 如果需要修改完整的表单可以使用set
您尝试过使用form.getRawValues() 吗？这是获取给定 formGroup 中所有控件的所有值的一种非常有效的方法。

标签： angular angular-reactive-forms

【解决方案1】：

使用this.profileForm.value，它会给你一个对象：

{
    firstname: "john" 
    phoneNo: "12344567"
    selectedService : [
        true,
        false,
        true
    ]
    gender : "male"
}

您会注意到 selectedService 不包含服务名称，但它们会按顺序排列，在遍历数组时应该可以正常工作。

【讨论】：

通过补丁将复选框绑定为 true/false 吗？我将它用于多个复选框coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular
另外，需要将值保存到用户输入的会话存储中，不能存储空值例如：名字：空
我不太明白，但如果你问，我可以将真/假的值修补到FormControl，是的。
什么都不会是null，因为你有firstName: new FormControl('')，上面写着“使用默认值''创建一个新的FormControl”
另外，如果这回答了您关于构建对象以准备在会话存储中存储的问题，请接受答案。如果您对如何将内容实际放入会话存储或如何从会话存储中填充表单有疑问，请提出一个新问题。

【解决方案2】：

如果你想存储和取回会话存储中的值，你应该使用JSON.stringify(this.profofileForm.value)。所以你会得到一个可以存储的字符串。稍后，您可以使用 JSON.parse 取回您的对象。要在表单中加载值，您可以在 FromControl 对象中初始化它们：

profileForm = new FormGroup({
    firstName: new FormControl('this.valFirstName'),
    phoneNo: new FormControl('this.valPhoneNo'),
    selectedService : FormArray('this.SelectedService')
    gender:new FormControl('this.gender'),
  });

valXxxxx 的值来自会话存储中已解析的 json 对象。

【讨论】：