formGroup ожидает экземпляр FormGroup: angular 4

Я создал formGroup в angular 4, где пользователь и организация хранятся в объекте. Теперь я хочу заполнить мою группу форм, используя эти два объекта. В моем 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 ожидает экземпляр FormGroup, пожалуйста, передайте его в

Любые входы?


angular angular-forms formgroups
person Bhushan Gadekar    schedule 19.07.2017    source источник
comment
Вы импортировали ReactiveFormsModule в свой модуль?   -  person Eduardo Vargas    schedule 19.07.2017
comment
да @EduardoVargas, если я удалю объект org из ts & html, тогда форма будет работать нормально   -  person Bhushan Gadekar    schedule 19.07.2017

Ответы (2)


arrow_upward
12
arrow_downward

Если вы не создаете форму в конструкторе компонента, то при первой визуализации представления userForm, вероятно, не определен, и именно поэтому вы получаете эту ошибку. Инкапсулируйте тег формы примерно так:

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

Таким образом, вид формы создается только после установки модели.

person Siro    schedule 19.07.2017
comment
Следует ли создавать формы (в моем случае с использованием FormBuilder) в конструкторе, а не в ngOnInit? - person isherwood; 13.12.2017

arrow_upward
0
arrow_downward

Используя ваш код и HTML, он работает по этой ссылке без изменения org. ССЫЛКА

Просто скопируйте приведенный ниже код и вставьте его в 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);
  }
}
person SoEzPz    schedule 11.01.2018