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>.

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> 

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>