After connecting my reactive form app with a REST API, I encountered an issue while trying to delete a hotel. Instead of displaying the ID of the clicked hotel, it shows "Really delete the Hotel: (undefined)?" What could be causing this problem in my code and how can I resolve it?
Below is the code for the delete function:
deleteHotel(): void {
if (this.hotel.ID === 0) {
// Don't delete, it was never saved.
this.onSaveComplete();
} else {
if (confirm(`Really delete the Hotel: ${this.hotel.hotelName}?`)) {
this.hs.deleteHotel(this.hotel.ID)
.subscribe(
() => this.onSaveComplete()
);
}
}
}
And here is the .html form:
<form (ngSubmit)="onSubmit(rHotelForm)" [formGroup] = "rHotelForm">
<input type="hidden" formConrolName="id"/>
<div class="form-group">
<div class="form-group col-md-6">
<label >Hotel Name</label>
<input id="hotelNameId" class="form-control" type="text"
formControlName="hotelName"/>
</div>
<div class="form-group">
<div class="form-group col-md-6">
<label >Phone</label>
<input class="form-control"formControlName="phone">
</div> </div>
<div class="form-group">
<div class="form-group col-md-6">
<label >Number of rooms</label>
<input class="form-control" formControlName="numberOfRooms" >
</div> </div>
<div class=" col-md-6">
<button type="submit" class="btn btn-lg btn-block btn-info" [disabled] ="!rHotelForm.valid">Submit</button>
</div>
<div class=" col-md-6">
<button class="btn btn-lg btn-block btn-secondary" (click) ="resetForm(hotelForm)">Reset</button>
</div>
</form>
<br> Value : {{rHotelForm.value | json}}
<form [formGroup] = "hotelForm">
<ul><li *ngFor="let hotel of hotels">
<span>
<a class="btn" (click)="deleteHotel()">
Hotel ID :{{hotel.ID}} Hotel Name : {{hotel.hotelName}}
</a>
</span>
</li></ul>
<button class="btn btn-lg btn-block btn-secondary" (click)
="deleteHotel(hotel.ID)">Delete Hotel</button>
</form>