angular - 无法初始化 FormGroup

Question

我正在研究动态形式，一切似乎都在工作，除了例外 -

“ formGroup 需要一个 FormGroup 实例”。

我得到了 JSONArray(Dynamic Form Array)，它在分配给一个变量后，我正在遍历每个元素的名称来初始化里面的表单组，ngOnInit但这似乎不起作用。

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

import { UserDataService } from '../../../app-user-services/user- data.service';

@Component({
  selector: 'dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {

  templateId = {
    "data": {
      "id": "Angular4"
    }
  }

  config: any[] = [];

  form: FormGroup;
  @Output() submitted: EventEmitter<any> = new EventEmitter<any>();

  constructor(
    private fb: FormBuilder, 
    private userService: UserDataService
  ) {}

  ngOnInit() {
    this.userService.getTemplateData(this.templateId).subscribe(result => {
      this.config = result;
      this.form = this.createGroup();
    });
  }

  createGroup() {
    const group = this.fb.group({});
    this.config.forEach(
      control => group.addControl(control.name, this.fb.control(''))
    );
    return group;
  }

}

** 这里：配置值如下 -**

config = [{
    "type": "input",
    "label": "Full name",
    "name": "name",
    "placeholder": "Enter your name"
  },
  {
    "type": "select",
    "label": "Favourite food",
    "name": "food",
    "options": ["Pizza", "Hot Dogs", "Knakworstje", "Coffee"],
    "placeholder": "Select an option"
  },
  {
    "label": "Submit",
    "name": "submit",
    "type": "button"
  },
];

结果：

DynamicFormComponent.html:4 ERROR 错误：formGroup 需要一个 FormGroup 实例。请传一份进去。

例子：

<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

在你的课堂上：

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

在以下情况下出现此异常：-

this.config = result;

所以基本上在我将 JsonArray 分配给配置之后，这个异常似乎来了。

如果 FormGroup 被初始化，我的代码将完美运行。

标签： angular