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