Angular 反应形式 - 错误：formGroup 需要一个 FormGroup 实例。请传入一个答案

【问题标题】：Angular reactive forms - ERROR : formGroup expects a FormGroup instance. Please pass one inAngular 反应形式 - 错误：formGroup 需要一个 FormGroup 实例。请传入一个
【发布时间】：2021-11-22 16:12:53
【问题描述】：

我正在尝试使用 Anguar-reactive-forms 创建一个简单的 Angular 表单。

在控制台中我收到了这个错误。我做错了什么？

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

我的服务文件

constructor(private http: HttpClient, private fb: FormBuilder) {
    this.resetForm;
  }

  resetForm() {
    this.form = this.fb.group({
      cardDetails: this.fb.group({
        cardholderName: [''],
        cardNumber: [''],
        expiryDate: [''],
        securityCode: [''],
      }),
      // removed 
    });

组件.ts

payment!: Payment;

  ngOnInit(): void {}

  ngOnDestroy(): void {
    this.appService.resetForm();
  }

  get form() {
    return this.appService.form;
  }

型号

export interface Payment {
  cardDetails: CardDetails;
  paymentRequest: PaymentRequest;
}
// removed

html

  <form [formGroup]="form">
    <div formGroupName="cardDetails">
      <p>
        <label>Cardholder Name:</label>
        <input type="text" formControlName="cardholderName" />
      </p>
      <p>
        <label>Card Number:</label>
        <input type="number" formControlName="cardNumber" />
      </p>
      <p>
        <label>ExpiryDate:</label>
        <input type="text" formControlName="expiryDate" />
      </p>
      <p>
        <label>Security code:</label>
        <input type="text" formControlName="securityCode" />
      </p>
    </div>
    <div formGroupName="paymentRequest">
      <p>
        <label>TransactionType:</label>
        <input type="text" formControlName="transactionType" />
      </p>
      <p>
        <label>vendorTxCode:</label>
        <input type="text" formControlName="vendorTxCode" />
      </p>
      <p>
        <label>amount:</label>
        <input type="text" formControlName="amount" />
      </p>
      <p>
        <label>currency:</label>
        <input type="text" formControlName="currency" />
      </p>
      <p>
        <label>description:</label>
        <input type="text" formControlName="description" />
      </p>
      <p>
        <label>customerFirstName:</label>
        <input type="text" formControlName="customerFirstName" />
      </p>
      <p>
        <label>customerLastName:</label>
        <input type="text" formControlName="customerLastName" />
      </p>
      <div formGroupName="paymentMethod">
        <div formGroupName="card">
          <p>
            <label>reusable:</label>
            <input type="text" formControlName="reusable" />
          </p>
          <p>
            <label>save:</label>
            <input type="text" formControlName="save" />
          </p>
        </div>
      </div>
    <button status="primary" (click)="onSubmitHandler()">Submit</button>
  </form>

请任何人帮助我找出我犯的错误。提前致谢。

【问题讨论】：

this.resetForm; 在构造函数中什么都不做。您需要调用该函数：this.resetForm();

标签： angular angular-reactive-forms

【解决方案1】：

您需要在 constructor 方法中调用类似 this.resetForm(); 的函数。

示例

form: FormGroup;

constructor( private fb: FormBuilder) {
  this.resetForm();
}

resetForm() {
  this.form = this.fb.group({
    cardDetails: this.fb.group({
      cardholderName: [''],
      cardNumber: [''],
      expiryDate: [''],
      securityCode: [''],
    }),
    // removed 
  });
}

onSubmitHandler(){

}

<form [formGroup]="form">
  <div formGroupName="cardDetails">
    <p>
      <label>Cardholder Name:</label>
      <input type="text" formControlName="cardholderName" />
    </p>
    <p>
      <label>Card Number:</label>
      <input type="number" formControlName="cardNumber" />
    </p>
    <p>
      <label>ExpiryDate:</label>
      <input type="text" formControlName="expiryDate" />
    </p>
    <p>
      <label>Security code:</label>
      <input type="text" formControlName="securityCode" />
    </p>
  </div>
  <div formGroupName="paymentRequest">
    <p>
      <label>TransactionType:</label>
      <input type="text" formControlName="transactionType" />
    </p>
    <p>
      <label>vendorTxCode:</label>
      <input type="text" formControlName="vendorTxCode" />
    </p>
    <p>
      <label>amount:</label>
      <input type="text" formControlName="amount" />
    </p>
    <p>
      <label>currency:</label>
      <input type="text" formControlName="currency" />
    </p>
    <p>
      <label>description:</label>
      <input type="text" formControlName="description" />
    </p>
    <p>
      <label>customerFirstName:</label>
      <input type="text" formControlName="customerFirstName" />
    </p>
    <p>
      <label>customerLastName:</label>
      <input type="text" formControlName="customerLastName" />
    </p>
  </div>
    <div formGroupName="paymentMethod">
      <div formGroupName="card">
        <p>
          <label>reusable:</label>
          <input type="text" formControlName="reusable" />
        </p>
        <p>
          <label>save:</label>
          <input type="text" formControlName="save" />
        </p>
      </div>
    </div>
  <button status="primary" (click)="onSubmitHandler()">Submit</button>
</form>

您可以查看Here

【讨论】：