Angular 5 个表单组列表控件或迭代它们

Question

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

声明如下

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

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

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

得到这是 chrome 调试：

Cannot read property 'length' of undefined

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

如何迭代键？

谢谢

Answer 1

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

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

如果你想得到键，那么你必须使用 Object.keys() 方法 returns 给定对象的属性名称的数组，顺序与我们得到的相同正常循环

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

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

Answer 2

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

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

this.check.controls 是对象 key/value 配对结构如果你想得到对象的键 {key1:value,key2:value} 你可以使用 Object.keys 方法 return 一个数组包含键 ['key1','key2']

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

Angular 5 个表单组列表控件或迭代它们

Angular 5 formgroup list controls or iterate them

forms

web

angular-fullstack

angular

formgroups