formGroup expects a FormGroup instance : angular 4

Question

I have created a formGroup in angular 4 where user & organization are stored in object. Now i want to populate my formgroup using these two objects. In my ts I have done the following:

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

And in my view , I am doing something like this:

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

But I am getting the below error:

formGroup expects a FormGroup instance , please pass one in

Any Inputs?

Santossantosdumont

Did you import the ReactiveFormsModule in your module? – Lengthwise

yes @EduardoVargas , If I remove org object from ts & html then form works fine – Santossantosdumont

Answer 1

If you're not creating the form in the component's constructor, the first time that the view is being rendered userForm is probably undefined and that's why you're getting that error. Encapsulate your form tag into something like this:

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

So the form view is only generated when the model has been set.

Gaberlunzie

Should forms be built (using FormBuilder, in my case) in the constructor instead of in ngOnInit? – Impeccant

Answer 2

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

Just copy below code and stick it in the 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);
  }
}

Arber