Angular 18 Issue on consuming Edit API

>

> > class="bi bi-pencil" data-bs-toggle="modal" > data-bs-target="#exampleModal"> > > > >
This is my edit button on route im calling store/id

<!-- Modal Popup -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="false" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">{{ storeId ? 'Edit Store' : 'Add Store' }}</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- Body -->
<form (ngSubmit)="storeId ? updateStore() : addStore()"> <!-- Conditional form submission -->
<div class="modal-body selectCustomerPopup">
<div class="row">
<!-- Store Name -->
<div class="col-12 mb-3">
<label for="storeName" class="form-label">Store Name</label>
<input type="text" class="form-control" id="storeName" placeholder="Enter your store name" [(ngModel)]="newStore.storeName" name="storeName" required #storeName="ngModel" />
<div *ngIf="storeName.invalid && storeName.touched" class="invalid-feedback">
Store Name is required.
</div>
</div>
<!-- Store Logo -->
<div class="col-12 mb-3">
<label for="storeLogo" class="form-label">Upload Logo</label>
<div class="file-drop-area">
<span class="choose-file-button"><i class="bi bi-cloud-arrow-up icon-32"></i> Click to upload</span>
<span class="file-message">or drag and drop files here</span>
<input id="storeLogo" class="file-input" type="file" (change)="onFileSelected($event)" name="storeLogo" [required]="!storeId" />
</div>
</div>
<!-- Is Active -->
<div class="col-12">
<label class="ci-check" for="showAllCustomers">
<input id="showAllCustomers" type="checkbox" [(ngModel)]="newStore.isActive" name="isActive" required />
<label> Is Active?</label>
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<!-- Footer -->
<div class="modal-footer text-center">
<button class="btn btn-primary" type="submit">{{ storeId ? 'Update Store' : 'Add Store' }}</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" [routerLink]="'/store'">Cancel</button>
</div>
</form>
</div>
</div>
</div>


<router-outlet></router-outlet>
<!-- end of Modal Popup -->


in this both edit and add functionality to be worked. But at the time of edit first click it showing add form and on second click it showing edit form why so..

ngOnInit(): void {
this.loadStoreData();
this.storeId = +this.route.snapshot.paramMap.get('id')!;
alert(this.storeId) // Get store ID from URL

}



// Method to fetch store details based on the store ID
fetchStoreDetails(id: number): void {
debugger;
this.storeService.getStoreById(id).subscribe(
(response) => {
if (response.success && response.data) {
this.newStore = response.data;
this.modalVisible = true;
this.cdr.detectChanges(); // Manually trigger change detection
}
},
(error) => {
console.error('Error fetching store:', error);
}
);
}

// Triggered when the Edit button is clicked
onEditClick(item: any): void {
debugger;
this.newStore = item;
// this.storeId = storeId;
// this.newStore = null; // Clear previous data
//this.fetchStoreDetails(storeId); // Fetch data again on edit click
}


this is my TS file

Continue reading...