formGroupはFormGroupインスタンスを期待しています：角度4

Question

私は角4でユーザ&の編成がオブジェクトに格納されているformGroupを作成しました。今私はこれらの2つのオブジェクトを使用して私のフォームグループを作成したい。私の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> 

モデルが設定されているときに、フォームビューにのみ生成されます。 はこのような何かにあなたのformタグをカプセル化します。

Answer 2

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

は、単にコードの下にコピーして、あなたのモジュールでReactiveFormsModuleをインポートしました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); 
    } 
}