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

Question

I have the following template. I'm trying to get to grips with reactive forms but am having a problem.

<form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form>
            <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>
    </div>
</form>

Then in my component I have:

@Component({
    selector: 'guest-input',
    templateUrl: './guest-input.component.html',
})
export class GuestInputComponent implements OnInit {
    @Input()
    guest: Guest;

    guestForm: FormGroup;
    
    constructor(private _fb: FormBuilder) { }

    ngOnInit() {
        this.guestForm = this._fb.group({
            firstname: ['test', [Validators.required, Validators.minLength(3)]]
        });
    }
}

This all looks fine to me but for some reason I am getting:

Error: Uncaught (in promise): Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

I thought I had declared this in my <form>.

Johannejohannes

In my case I accidently placed a formcontrol outside form tag – Depone

Answer 1

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>

Borrero

I have the same problem with him but I didn't duplicate my form tag. The error that shows look exactly like him – Claudeclaudel

Check if you have an input somewhere with a formControlName attribute but not inside a form tag. Then remove it – Meristic

Answer 2

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>

Antigen

This is the one that worked for me. I had the formGroup nested to deep. – Wycliffite

What if i don't want it to be in parent element? – Fluting

@Fluting There are 3 types of driving forms in angular, try the other ones – Antigen

Answer 3

Those error are so not descriptive... In my case - it turned up that I have doubled formControlName='...' inside my child component.

Parent component:

<div [formGroup]="formGroup">
    <quill-text-editor formControlName="my_control"></quill-text-editor>
</div>

quill-text-editor component template:

<quill-editor
  formControlName="my_control"//<--- I've deleted this to fix the error.
  (onFocus)="onEditorFocus()"
  (onBlur)="onEditorBlur()"
></quill-editor>
<hr>
<div class="toolbar">
  <div class="tool">...

Thedrick

Answer 4

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

Gunpoint

Answer 5

so the question is that if you have just one form control do you even need a formgroup?

In my case, I have to pass my input value to the parent component with #ControlValueAccessor through registerOnChange method.

when I set a formControl inside a formGroup everything is sunshine and roses, otherwise I catch the same error.

<mat-form-field appearance="fill">
    <mat-label > label</mat-label>
    <input matInput formControlName="planValue">
</mat-form-field>

in comparison with:

<form [formGroup]="valueFG" >

<mat-form-field appearance="fill">
    <mat-label > label</mat-label>
    <input matInput formControlName="planValue">       
</mat-form-field></form>

Belldame

Yes! This! Bard will tell you that a FormGroup is not required and that you can use a formcontrol outside of a form. Is it incorrect? – Kelcy

Answer 6

<div class="col-md-12" formArrayName="educations">
</div>

ts file code

educations: this.formBuilder.array([]),

Or

<form [formGroup]="manageOrderForm">

</form>

ts file code import { Router } from '@angular/router';

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {

  manageOrderForm: any;
}

Rene

Answer 7

Solution The code [formGroup]="guestForm" must go a couple of levels above, example:

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

Minneapolis

Answer 8

In My case my form was closed before it should have been:

  <div>
  <mat-card>
    <mat-card-header>
  <mat-card-title>{{ actionName }} Categoria</mat-card-title>

    </mat-card-header>
    <mat-card-content>
      <form [formGroup]="categoryForm" #categoryFormDirective="ngForm"></form>

      <mat-form-field class="w-300">
        <mat-label>Nome</mat-label>
        <input matInput type="text" formControlName="name" />
      </mat-form-field>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="warn" (click)="cancel()">
        Cancelar
      </button>
      <button mat-raised-button color="warn" (click)="save()">Salvar</button>
    </mat-card-actions>
  </mat-card>
</div>

It started working after changing to the code below:

<div>
  <mat-card>
    <mat-card-header>
      <mat-card-title>{{ actionName }} Categoria</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <form [formGroup]="categoryForm" #categoryFormDirective="ngForm">
        <div style="display: flex; flex-direction: column">
          <mat-form-field class="w-300">
            <mat-label>Nome</mat-label>
            <input matInput type="text" formControlName="name" />
          </mat-form-field>
        </div>
      </form> //<--Closing form Here
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="warn" (click)="cancel()">
        Cancelar
      </button>
      <button mat-raised-button color="warn" (click)="save()">Salvar</button>
    </mat-card-actions>
  </mat-card>
</div>

Ivy