Angular 5 formgroup 列表控件或迭代它们答案

【问题标题】：Angular 5 formgroup list controls or iterate themAngular 5 formgroup 列表控件或迭代它们
【发布时间】：2019-01-06 16:31:43
【问题描述】：

我正在使用带有 formgorup 的 Angular 5 并希望迭代控件，以便创建基于表单的动态组件，表单字段由外部数据服务（数据库等）提供。

声明如下

check = new FormGroup({
    firstName : new FormControl(true),
    lastName : new FormControl(false)
  });

我发现this 解释了如何迭代控件，但它不起作用。我尝试使用：

for(let item of this.check.controls){}

得到这是 chrome 调试：

无法读取未定义的属性“长度”

我无法访问 this.check.controls.keys 或 keys()

如何迭代密钥？

谢谢

【问题讨论】：

试试for(let item in this.check.controls){console.log(item)}

标签： angular forms web angular-fullstack formgroups

【解决方案1】：

尝试使用Object.keys方法获取对象键

Object.keys(this.check.controls); // => ["firstName", "lastName"]

this.check.controls 是对象键/值对结构如果你想获取对象{key1:value,key2:value} 的键，你可以使用 Object.keys 方法返回一个包含键的数组['key1','key2']

【讨论】：

太好了，工作，你能解释一下它为什么工作吗？

【解决方案2】：

此表单返回值的对象而不是值的数组

check = new FormGroup({
        firstName : new FormControl(true),
        lastName : new FormControl(false)
      });

如果要获取键，则必须使用 Object.keys() 方法返回给定对象属性名称的数组，其顺序与我们使用普通循环获得的顺序相同

KeyArray= Object.keys(this.check.controls)// ["firstName", "lastName"]

例如：https://stackblitz.com/edit/angular-stszta

【讨论】：

【解决方案3】：

遍历一个对象：

for(let item in this.check.controls){
    console.log(this.check.controls[item])
}

【讨论】：

但这有效:(检查this

【解决方案4】：

这个功能对我来说很好用

public static ResetForm(form: FormGroup, config = {}) {
    const controls: string[] = Object.keys(form.controls);

    controls.forEach(key => {
      if (config[key] && config[key]["default"])
        form.get(key).setValue(config[key]["default"]);
      else form.get(key).setValue("");
      form.get(key).setErrors(null);
      form.get(key).markAsTouched();
    });
  }

如果你想设置空字符串以外的默认值，使用如下配置对象

ResetForm(this.form, {
      categories: {
        default: []
      }
    });

【讨论】：