首页 文章

formGroup需要一个FormGroup实例：angular 4

提问于
浏览 次
4

我在角度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需要一个FormGroup实例，请传入一个

任何输入？

angular angular-forms formgroups

2 回答

  • 0

    如果您没有在组件的构造函数中创建表单，那么第一次呈现视图时userForm可能是未定义的，这就是您收到该错误的原因 . 将表单标记封装成以下内容：

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

    因此，仅在设置模型时生成表单视图 .

    回复于
  • 10

    使用您的代码和HTML，它可以在此链接中工作而无需更改组织 . 链接

    只需复制下面的代码并将其粘贴在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);
  }
}
    回复于

相关问题