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

I am try to create a simple form in angular using Anguar-reactive-forms.

In console I got this error. What is the mistake I did?

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

My service file

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;
  }

Model

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>

Please anyone help me to find the mistake I did.
Thanks in advance.

>Solution :

you need to call function like this this.resetForm(); in your constructor method.

Exmaple

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>

you can check Here