formControlName must be used with a parent formGroup directive

Question

While creating model driven form, i am getting an error: 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).

Please tell me whats going wrong in this code.

app.component.html

<div class="col-md-6">
  <form  (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
    <div class="form-group">
      <label for="sessionName">Session Name:</label>
      <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
    </div>
    <div class="form-group">
      <label for="abstract">Abstract:</label>
      <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
  </form>
</div>

app.component.ts

export class CreateSession {

    newSessionForm:FormGroup;
    abstract : FormControl;
    name : FormControl;

    ngOInInit(){
        this.name = new FormControl('', Validators.required)
        this.abstract = new FormControl('', Validators.required)

        this.newSessionForm = new FormGroup({
            name:this.name,
            abstract: this.abstract
        })         
    }


    saveSession(formValues){
        console.log(formValues);
    }

Muskrat

It's solved here! #43306475 – Thessalonian

Answer 1

Angular is waiting for FormGroupDirective on any of parent elements. So:

<form [formGroup]="newSessionForm" ...
  <input formControlName="name"
  ...
  <input formControlName="abstract"

If you want to use FormControl without formGroup you can use FormControlDirective instead:

<input [formControl]="name"
...
<input [formControl]="abstract"

Fuliginous

How to access this value in typescript ? – Salicylate

Answer 2

If your FormGroup is in a parent component, and Form control in a child component, you have to declare viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] in the child component like this:

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})

export class ChildComponent implements OnInit {
...

Georgy

Answer 3

Can u try this way

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

Selfdiscipline

Answer 4

First you have to specify the formGroup , which one is going to drive the form controls binded with the inputs.

<form [formGroup]="newSessionForm" (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
<div class="form-group">
  <label for="sessionName">Session Name:</label>
  <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
</div>
<div class="form-group">
  <label for="abstract">Abstract:</label>
  <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>

Frisby