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); 
    } 
}