ERROR 错误：formGroup 需要一个 FormGroup 实例。请传入一个答案

【问题标题】：ERROR Error: formGroup expects a FormGroup instance. Please pass one inERROR 错误：formGroup 需要一个 FormGroup 实例。请传入一个
【发布时间】：2021-01-08 17:52:21
【问题描述】：

我目前正在开发一个 Angular 8 应用程序并实施反应形式。我不知道我哪里出错了，而且每次我运行项目时出现以下错误。

*ERROR 错误：formGroup 需要一个 FormGroup 实例。请传一份进去。示例：

<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
   firstName: new FormControl()
});
at Function.missingFormException*

我还附上了错误的图片。

我的 HTML 代码

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8 mr-auto ml-auto">
      <div class="panel panel-default">
        <form [formGroup]="customStripeForm" (ngSubmit)="pay(customStripeForm.value)">
          <div class="panel-body mt-5">
            <h4>Stripe - Custom form demo</h4>
            <p><b>{{ message }}</b></p>
            <div class="row">
              <div class="col-xs-12 col-md-12">
                <div class="form-group">
                  <label>CARD NUMBER</label>
                  <div class="input-group">
                    <input type="text" formControlName="cardNumber" class="form-control" placeholder="Valid Card Number" name="cardNumber" maxlength="18" />

                    <span class="input-group-addon">
                      <span class="fa fa-credit-card"></span>
                    </span>
                  </div>
                  <div *ngIf="submitted &amp;&amp; customStripeForm.controls.cardNumber.errors" class="text-danger">
                    <div *ngIf="customStripeForm.controls.cardNumber.errors.required">Card number is required</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-7 col-md-7">
                <div class="form-group">
                  <label><span class="hidden-xs">EXPIRATION</span> Date</label>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <select formControlName="expMonth" class="form-control">
                          <option value="">Select Month</option>
                          <option value="1">01</option>
                          <option value="2">02</option>
                          <option value="3">03</option>
                          <option value="4">04</option>
                          <option value="5">05</option>
                          <option value="6">06</option>
                          <option value="7">07</option>
                          <option value="8">08</option>
                          <option value="9">09</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-md-6 pull-right">
                    <div class="form-group">
                      <select formControlName="expYear" class="form-control">
                        <option value="">Select Year</option>
                        <option value="20">2020</option>
                        <option value="21">2021</option>
                        <option value="22">2022</option>
                        <option value="23">2023</option>
                        <option value="24">2024</option>
                        <option value="25">2025</option>
                        <option value="26">2026</option>
                        <option value="27">2027</option>
                        <option value="28">2028</option>
                        <option value="29">2029</option>
                        <option value="30">2030</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div *ngIf="submitted &amp;&amp; customStripeForm.controls.expMonth.errors" class="text-danger">
                  <div *ngIf="customStripeForm.controls.expMonth.errors.required">Expiration month is required</div>
                </div>

                <div *ngIf="submitted &amp;&amp; customStripeForm.controls.expYear.errors" class="text-danger">
                  <div *ngIf="customStripeForm.controls.expYear.errors.required">Expiration year is required</div>
                </div>
              </div>
            </div>
            <div class="col-xs-5 col-md-5 pull-right">
              <div class="form-group">
                <label>CV CODE</label>
                <input type="text" formControlName="cvv" class="form-control" placeholder="CVC" maxlength="4" />
              </div>
              <div *ngIf="submitted &amp;&amp; customStripeForm.controls.cvv.errors" class="text-danger">
                <div *ngIf="customStripeForm.controls.cvv.errors.required">CVV is required</div>
                <div *ngIf="customStripeForm.controls.cvv.errors.minlength">CVV must be at least 3 characters</div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-footer">
          <div class="row">
            <div class="col-xs-12 col-md-12">
              <button class="btn btn-warning btn-lg btn-block" *ngIf="!formProcess">Process payment</button>
              <span class="btn btn-warning btn-lg btn-block" *ngIf="formProcess">Processing please wait...</span>
            </div>
          </div>
        </div>
      </form>
      <p class="mt-2">Try it out using the test card number 4242 4242 4242 4242, a random three-digit CVC number and any expiration date in the future.</p>
    </div>
  </div>
</div>
</div>

我的 TS 文件

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  submitted: boolean;
  formProcess: boolean;
  message: string;
  public customStripeForm: FormGroup;

  ngOnInit(): void {
    this.loadStripe();
  }

  loadStripe() {
    if(!window.document.getElementById('stripe-custom-form-script')) {
      var s = window.document.createElement('script');
      s.id = 'stripe-custom-form-script';
      s.type = 'text/javascript';
      s.src = 'https://js.stripe.com/v2/';
      s.onload = () => {
        window['Stripe'].setPublishableKey('pk_test_aeUUjYYcx4XNfKVW60pmHTtI');
      };
      window.document.body.appendChild(s);
    }
  }


  pay(form) {

    if(!window['Stripe']) {
      alert('Oops! Stripe did not initialize properly.');
      return;
    }

    this.submitted = true;

    console.log(this.customStripeForm);
    if (this.customStripeForm.invalid) {
      return;
    }

    this.formProcess = true;
    console.log("form");
    console.log(form);
    if(!window['Stripe']) {
      alert('Oops! Stripe did not initialize properly.');
      return;
    }
    (<any>window).Stripe.card.createToken({
      number: form.cardNumber,
      exp_month: form.expMonth,
      exp_year: form.expYear,
      cvc: form.cvc
    }, (status: number, response: any) => {
      this.submitted = false;
      this.formProcess = false;
      if (status === 200) {
        this.message = `Success! Card token ${response.card.id}.`;
      } else {
        this.message = response.error.message;
      }
    });
  }




};

【问题讨论】：

请发布文字，而不是文字图片。
我已经更新了我的问题。于现在可以查看了
你在哪里初始化你的FormGroup？它在错误消息中这样说。

标签： javascript html angular typescript angular-reactive-forms

【解决方案1】：

我看到你没有初始化customStripeForm 值。您需要像这样在 ngOnInit 函数上初始化该值。

this.customStripeForm = this._formBuilder.group({
  name: [ "", Validators.required ],
  ...
});

这里，this._formBuilder 是FormBuilder 在构造函数上定义的实例，如下所示。

constructor(
  private _formBuilder: FormBuilder) {
}

您需要在声明该组件的模块上导入FormsModule 和ReactiveFormsModule。就你而言，AppModule 我想。

【讨论】：

【解决方案2】：

我通过在组件的构造函数中初始化表单来解决问题，有点像这样

constructor(    
    this.mycustomForm = this._formBuilder.group({
      //for stuff goes here
      ...
    }));

【讨论】：