formGroup erwartet ein FormGroup Beispiel: Winkel 4

Question

I eine formGroup in Winkel 4 angelegt, wo Benutzer & Organisation im Objekt gespeichert ist. Jetzt möchte ich meine Formulargruppe mit diesen beiden Objekten füllen. In meinem ts habe ich folgendes getan:

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

Und meiner Meinung nach, ich tue etwas wie folgt aus:

<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> 

Aber ich bin das unten stehende Störung zu erhalten:

formGroup expects a FormGroup instance , please pass one in

Beliebige Eingänge?

Answer 1

Wenn Sie nicht das Formular in der Konstruktor der Komponente zu schaffen, das erste Mal, dass die Ansicht Benutzerformular, das aufbereitet wird, ist wahrscheinlich nicht definiert, und das ist, warum Sie diesen Fehler. Formular-Tag in so etwas wie dieses kapseln:

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

So wird die Formularansicht nur dann erzeugt wird, wenn das Modell eingestellt wurde.

Answer 2

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

Kopieren Sie einfach unten Code und kleben Sie es in den 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); 
    } 
}