Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive - Angular reactive forms

You have nested form tag inside form tag with FormGroup directive, remove it:

<form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form> -> Remove this
            <div class="col-md-12 col-sm-12">
                <div class="form-group col-md-3 col-sm-6">
                    <label>First Name*  </label>
                    <input formControlName="firstname" type="text" class="form-control input-sm">
                </div>
            </div>
        </form> -> Remove this
    </div>
</form>

In modelDrivenForms, [formGroup]="guestForm" should be in the parent element

<div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm">
  <label>First Name*  </label>
  <input formControlName="firstname" type="text" class="form-control input-sm">
</div>

When you take form-control without formGroup.

Error code:

<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input
      formControlName="promotionMaterial"
      (change)="onChange($event)"
      class="tgl tgl-light tgl-primary"
      id="promotionMaterial"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="promotionMaterial"></label>
  </div>
</li>
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input formControlName="offer" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
    <label class="tgl-btn m-0" for="offer"></label>
  </div>
</li>
<li class="d-flex align-items-center">
  <div class="custom-switch ml-auto">
    <input
      formControlName="termsAndConditions"
      (change)="onChange($event)"
      class="tgl tgl-light tgl-primary"
      id="termsAndConditions"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="termsAndConditions"></label>
  </div>
</li>

In [Error code] I take "formControlName" so it does not work for me.

Solution:

<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input
      [formControl]="promotionMaterial"
      class="tgl tgl-light tgl-primary"
      id="promotionMaterial"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="promotionMaterial"></label>
  </div>
</li>
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input [formControl]="offer class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
    <label class="tgl-btn m-0" for="offer"></label>
  </div>
</li>
<li class="d-flex align-items-center">
  <div class="custom-switch ml-auto">
    <input
      [formControl]="termsAndConditions"
      class="tgl tgl-light tgl-primary"
      id="termsAndConditions"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="termsAndConditions"></label>
  </div>
</li>

In solution i take [formControl] insted of formControlName its working fine