formControlName must be used with a parent formGroup directive
Solution 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"
Solution 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 {
...
Er Vipin Sharma
frontend Developer working on Angular 2 in Noida,India.
Updated on June 11, 2022Comments
-
Er Vipin Sharma almost 2 years
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); }