formGroup需要一个FormGroup实例：angular 4

Question

我已经在angular 4中创建了一个formGroup，其中用户&组织存储在对象中。现在我想使用这两个对象填充我的表单组。 在我的TS我也做了以下内容：

createForm(user: any) { 
    this.userForm = this.fb.group({ 
     name: user.profileData.name, 
     email: user.profileData.email, 
     phone: user.profileData.mobileNumber,  
     orgForm: this.fb.group({ 
     name: [ user.organisation.name , [Validators.required]] 
     }) 
    }); 
} 

而且在我看来，我做这样的事情：

<form [formGroup]="userForm" class="user-form" (ngSubmit)="onSubmit()" novalidate> 
     <div fxLayout="row"> 
     <div fxLayout="column" fxFlex="50%"> 
      <div class="form-group"> 
      <md-input-container class="full-width"> 
       <input mdInput placeholder="User Name" formControlName="name"> 
      </md-input-container> 
      </div> 
      <div class="form-group"> 
      <md-input-container class="full-width"> 
       <input mdInput placeholder="User Email" formControlName="email"> 
      </md-input-container> 
      </div> 
      <div class="form-group"> 
      <md-input-container class="full-width"> 
       <input mdInput placeholder="User Phone" formControlName="phone"> 
      </md-input-container> 
      </div> 
      <div class="form-group"> 
      <button md-raised-button type="submit" [disabled]="userForm.pristine">Save</button> 
      </div> 
     </div> 
     <div fxLayout="column" fxFlex="50%" formGroupName="orgForm"> 
      <div class="form-group"> 
      <md-input-container class="full-width"> 
       <input mdInput placeholder="Organization Name" formControlName="name"> 
      </md-input-container> 
      </div> 
     </div> 
     </div> 
    </form> 

但我得到下面的错误：

formGroup expects a FormGroup instance , please pass one in

任何输入？

Answer 1

如果您没有在组件的构造函数中创建窗体，则第一次呈现该窗体的用户userForm可能是未定义的，这就是您遇到此错误的原因。 封装你的表单标签弄成这个样子：

<div *ngIf='userForm'> 
</div> 

所以当模型已经设置表单视图时，才会生成。

Answer 2

Using your code and HTML, it works in this link without changing org. LINK

请复制下面的代码，并把它贴在dyniamic-form.component.ts

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

import { QuestionBase }    from './question-base'; 
import { QuestionControlService } from './question-control.service'; 

@Component({ 
    selector: 'app-dynamic-form', 
    templateUrl: './dynamic-form.component.html', 
    providers: [ QuestionControlService ] 
}) 

export class DynamicFormComponent implements OnInit { 

    @Input() questions: QuestionBase<any>[] = []; 
    form: FormGroup; 
    payLoad = ''; 

    constructor(private qcs: QuestionControlService, private fb: FormBuilder) { } 

    userForm; 

    ngOnInit() { 
    this.form = this.qcs.toFormGroup(this.questions); 
    this.userform = this.createForm({profileData:{ 
     name: 'h', 
     email: 'l', 
     mobileNumber: '8' 
    }, organisation: {name: 'oh'}}) 
    } 

createForm(user: any) { 
    this.userForm = this.fb.group({ 
    name: user.profileData.name, 
    email: user.profileData.email, 
    phone: user.profileData.mobileNumber,  
    orgForm: this.fb.group({ 
     name: [ user.organisation.name , [Validators.required]] 
    }) 
    }); 
} 

onSubmit() { 
    this.payLoad = JSON.stringify(this.form.value); 
    } 
}