Angular Reactive Form - Get 'formDirective is null' error

This is my form:

<div class="container">
  <form formGroupName="checkoutForm">
    <section>
        <div class="row">
            <div class="col col-12 col-lg-8">
                <div class="row mb-4">
                    <div formGroupName="deliveryAddress">
                        <div class="col">
                            <label class="form-label">First Name</label>
                            <input id="firstName" class="form-control fw-bold" type="text" required
                                formControlName="firstName" (change)="saveToDataStore()">
                        </div>

                        <div class="col">
                            <label class="form-label">Last Name</label>
                            <input id="lastName" class="form-control fw-bold" type="text" required
                                formControlName="lastName" (change)="saveToDataStore()">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
  </form>
</div>

This is the declaration of the form in the component:

export class Checkout2Component { 
  checkoutForm: FormGroup; 
  public cart;

  ngOnInit() {

    this.checkoutForm = new FormGroup({
      deliveryAddress: new FormGroup({ 
        firstName: new FormControl(''),
        lastName: new FormControl(''),
        phone: new FormControl(''),
        address1: new FormControl(''),
        address2: new FormControl(''),
        useAsBillingAddress: new FormControl(''),
      }),
      applianceDelivery: new FormGroup({ 
          deliveryDate: new FormControl(''),
          specialInstructions: new FormControl(''),
      }),
      paymentMethod: new FormGroup({ 
        // paymentType: 'new FormControl(Credit Card'),
        cardNumber: new FormControl(''),
        expMonth: new FormControl(''),
        expYear: new FormControl(''),
        CVV: new FormControl(''),
        defaultCreditCard: new FormControl(''),
      })
    });

    console.log('this.checkoutForm', this.checkoutForm.value);

    // this.initCheckoutForm();
  }

I get the following error when I run the application:

ERROR TypeError: this.formDirective is null ngOnInit http://localhost:4200/main-A4KJZJDC.js:14 U0 http://localhost:4200/main-A4KJZJDC.js:10 mN http://localhost:4200/main-A4KJZJDC.js:10 mw http://localhost:4200/main-A4KJZJDC.js:10 bc http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 Gh http://localhost:4200/main-A4KJZJDC.js:10 w_ http://localhost:4200/main-A4KJZJDC.js:10 ER http://localhost:4200/main-A4KJZJDC.js:10 __ http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 Gh http://localhost:4200/main-A4KJZJDC.js:10 w_ http://localhost:4200/main-A4KJZJDC.js:10 D_ http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 Gh http://localhost:4200/main-A4KJZJDC.js:10 w_ http://localhost:4200/main-A4KJZJDC.js:10 ER http://localhost:4200/main-A4KJZJDC.js:10 __ http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 Gh http://localhost:4200/main-A4KJZJDC.js:10 bR http://localhost:4200/main-A4KJZJDC.js:10 v_ http://localhost:4200/main-A4KJZJDC.js:10 _P http://localhost:4200/main-A4KJZJDC.js:10 detectChangesInAttachedViews http://localhost:4200/main-A4KJZJDC.js:10

I can't reproduce the mentioned formDirective error. But you are not using the formGroup directive correctly.

You need to apply the [formGroup] directive and provide the FormGroup instance in the <form> element instead of formGroupName="checkoutForm".

<form [formGroup]="checkoutForm">
  ...
</form>

Demo @ StackBlitz