Why is my Angular Form giving me a '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>

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

>Solution :

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