出现错误：formGroup 需要一个 FormGroup 实例。请传入一个

Posted 2023-03-13

【中文标题】出现错误：formGroup 需要一个 FormGroup 实例。请传入一个

【英文标题】：Getting Error: formGroup expects a FormGroup instance. Please pass one in

【发布时间】：2018-06-11 19:10:09

【问题描述】：

我是 Angular 2 的新手，即使在查看了其他堆栈溢出答案后也无法解决此问题。

我刚刚开始学习角度反应形式，想尝试第一个示例，但被卡住了。请帮忙。

这是 html 表单。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
        <div id="user-data">
          <div class="form-group">
            <label for="username">Username</label>
            <input
              type="text"
              id="username"
              formControlName="username"
              class="form-control">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input
              type="email"
              id="email"
              formControlName="email"
              class="form-control">
          </div>
          <div class="radio" *ngFor="let gender of genders">
            <label>
              <input
                type="radio"
                class="form-control"
                formControlName="gender"
                [value]="gender"> gender 
            </label>
          </div>
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

这是 TS 文件。

import  Component, OnInit  from '@angular/core';
import  FormGroup  from '@angular/forms';
import  FormControl  from '@angular/forms';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)

export class AppComponent implements OnInit 

  genders = ['male', 'female'];
  // property to hold the form
  sigupForm: FormGroup;

  ngOnInit() 
    // initialize the form before rendering the template
    // hence 'OnInit' because this gets executed before the template is rendered// pass js object
    //  tells this form doesn't has any 'controls'
    // 'controls' are key-value pairs to the overall form group

    this.sigupForm = new FormGroup(
      // form controls
      // arg1 - intial state/value of this control
      // arg2 - single validator or an array of validators
      // arg3 - async validators
      'username': new FormControl(null),
      'email': new FormControl(null),
      'gender': new FormControl('male')
    );
  

  onSubmit() 
    console.log(this.sigupForm);
  

在输出中，我可以看到用户名和电子邮件字段，但没有性别字段。

你能帮我解决这个问题吗？

我确信这只是一个微小的变化，但我仍然无法弄清楚。

【问题讨论】：

可能是因为错字>>> sigupForm 而不是 .ts 文件中的 signupForm

【参考方案1】：

就我而言，我使用的是响应式表单并从服务异步加载表单数据。但是，表单模板将开始并行生成。那时表单将是未定义的，因为它只有在收到来自 API 调用的数据后才会构建。所以，首先检查表单是否初始化，然后才开始生成模板。

<form class="col-sm-12 form-content" *ngIf="form" [formGroup]="form">

【讨论】：

您的解决方案消除了错误，但如果异步数据未准备好，则不会加载表单。另外，我很困惑，因为表单不应该只在 ngOnInit 完成后加载吗？有没有办法延迟加载表单，直到所有异步数据都准备好？

发现在使用异步 ngOnInit() 的情况下。然后 *ngIf="form" 将解决问题

【参考方案2】：

formGroup expects a FormGroup instance 表示您没有为模板中定义的 FormGroup 创建实例 signupForm

所以你必须像这样为signupForm 创建一个实例：

this.signupForm = new FormGroup(
  // form controls
  // arg1 - intial state/value of this control
  // arg2 - single validator or an array of validators
  // arg3 - async validators
  'username': new FormControl(null),
  'email': new FormControl(null),
  'gender': new FormControl('male')
);

【参考方案3】：

请仔细检查您的组件代码。我注意到您在那里定义的变量与模板中指定的变量不同。

您应该将sigupForm 的引用改为signupForm。