angular - Angular 5 formgroup 列表控件或迭代它们

Question

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

声明如下

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

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

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

得到这是 chrome 调试：

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

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

如何迭代密钥？

谢谢

Answer 1

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

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

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

Answer 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

Answer 3

迭代一个对象：

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

Answer 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: []
      }
    });