I utilized [hidden] in the following way where the value of "secondTab" is set to true.
<form #siteForm="ngForm" novalidate (ngSubmit)="saveSite(siteForm.value,siteForm.valid)" class="admin-modal">
<div class="txt-danger">{{errorMessage}}</div><br/>
<ul role="tablist" class="nav nav-tabs">
<li [ngClass]="{active:firstTab}"><a (click)="siteDetail()">Site Details</a></li>
<li [ngClass]="{active:secondTab}"><a (click)="siteLocation()">Site Location</a></li>
</ul>
<div [hidden]="secondTab">
<input type="hidden" class="form-control" value="{{site.location}}" name="location" [(ngModel)]="site.location" #location>
<input type="hidden" class="form-control" value="{{site.id}}" name="id" [(ngModel)]="site.id" #id>
<div class="form-group mb-20" [ngClass]="{'has-error':name.errors && (name.dirty || name.touched || siteForm.submitted)}">
<label class="control-label mb-10">Site Name</label>
<input type="text" class="form-control default-rounded" name="name" required [(ngModel)]="site.name" #name>
<small [hidden]="name.valid || (name.pristine && !siteForm.submitted)" class="text-danger">
Name is required.
</small>
</div>
<div class="form-group mb-20" [ngClass]="{'has-error':maximumCapacity.errors && (maximumCapacity.dirty || maximumCapacity.touched || siteForm.submitted)}">
<label class="control-label mb-10">Maximum Capacity</label>
<input type="text" class="form-control default-rounded" name="maximumCapacity" required [(ngModel)]="site.maximumCapacity" #maximumCapacity pattern="[0-9]+">
<small [hidden]="maximumCapacity.valid || (maximumCapacity.pristine && !siteForm.submitted)" class="text-danger">
Maximum capacity is required (enter only digits)
</small>
</div>
<div class="form-group mb-20">
<label class="control-label mb-10">Site Type</label>
<select class="form-control" name="type" [(ngModel)]="site.type" #type>
<option>Commercial</option>
<option>Residential</option>
<option>Industrial</option>
<option>Etc</option>
</select>
</div>
<div class="form-group mb-20" [ngClass]="{'has-error':contactNumber.errors && (contactNumber.dirty || contactNumber.touched || siteForm.submitted)}">
<label class="control-label mb-10">Site Contact Number</label>
<input type="text" class="form-control default-rounded" name="contactNumber" required [(ngModel)]="site.contactNumber" #contactNumber>
<small [hidden]="contactNumber.valid || (contactNumber.pristine && !siteForm.submitted)" class="text-danger">
Site contact number is required
</small>
</div>
</div>
<div [hidden]="firstTab">
<div class="form-group mb-20">
<label class="control-label">Address</label>
<div class="flex">
<div class="w-79 mr-10 mt-5">
<input type="text" class="form-control default-rounded" name="location" required places-auto-complete (place_changed)="placeChanged($event)" [types]="['geocode']">
</div>
<div class="mt-5">
<button type="button" class="btn btn-primary black-background white-text pull-right" (click)="changeMap()">Lookup</button>
</div>
</div>
</div>
<div class="form-group mb-20">
<ng2-map zoom="{{zoom}}" center="{{site.latitude}}, {{site.longitude}}">
<marker *ngFor="let pos of positions" [position]="pos" [icon]="markerImage"></marker>
<drawing-manager [drawingMode]="'marker'" [drawingControl]="true" [drawingControlOptions]="{ position: 2, drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] }" [circleOptions]="{ fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, editable: true, zIndex: 1 }"></drawing-manager>
</ng2-map>
</div>
</div>
<button type="submit" class="btn btn-primary black-background white-text pull-right">Save</button>
If I change the value of "secondTab" to false, then I encounter the following error
ORIGINAL EXCEPTION: self._NgModel_202_5.context is not a function
If I use ngFor instead of [hidden], everything runs smoothly but I do not receive the value on form submission when I am on the second tab.
If I utilize formBuilder instead for the form, then it functions correctly. Therefore, the issue may lie with ngModel.