Angular reactive forms - ERROR : formGroup expects a FormGroup instance. Please pass one in

Question

我正在尝试使用 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 
    });

Component.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>

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

Answer 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

Angular reactive forms - ERROR : formGroup expects a FormGroup instance. Please pass one in

Angular reactive forms - ERROR : formGroup expects a FormGroup instance. Please pass one in

angular

angular-reactive-forms