无法初始化FormGroup

Question

我正在处理动态表单，除异常外，一切似乎都在工作-

  

“ formGroup需要一个FormGroup实例”。

我得到JSONArray（动态表单数组），将其分配给变量后，我遍历每个元素的名称以初始化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错误错误：formGroup需要一个FormGroup实例。请传递一个。

示例：

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

在您的课堂上：

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

以下情况出现此例外：-

this.config = result;

因此，基本上在我将JsonArray分配给config之后，似乎会出现此异常。

如果FormGroup初始化了，我的代码将运行正常。