I am currently designing a straightforward web page featuring a modal for creating a new object named Partner and sending it to the server. The page also includes multiple input fields to showcase the newly created data. In this project, I am utilizing Angualr10 along with mdbootstrap components.
The setup consists of a button and a form containing only disabled input fields. These fields serve the purpose of displaying information about the created Partner.
Upon visiting the page, users can click on the button to open a modal where they can input new data related to the Partner. Upon clicking "save," the Partner object is successfully sent to the server and retrieved back with an id. As a result, the variable currentPartner is initialized and not null.
https://i.sstatic.net/wIIz8.png
The challenge arises when attempting to update the input fields using the currentPartner object. How do I ensure that currentPartner is not null? Well, if I click on any of the input fields (after sending data to the server), that particular field gets updated with the data previously entered in the modal.
https://i.sstatic.net/YEDQE.png
Below is the code snippet:
currentPartner : Partner; //declare partner
savePartnerAndCloseModal(modal : any){
modal.hide()
var partner = <Partner>{}
partner.name = this.name.value;
partner.phone = this.phone.value;
partner.taxNumber = this.taxNo.value;
partner.email = this.phone.value;
partner.address = this.address.value;
this.partnerService.addPartner(partner).subscribe(data =>{
this.currentPartner = data //Partner from server with id
this.partners.push(data) //some list with other Partners
});
}
<form class="text-center border border-light p-5" >
<p class="h4 mb-4">Business Partner</p>
<!-- Name -->
<div [ngModel]="currentPartner" *ngIf="currentPartner; else elseBlock">
<input type="text" mdbInput disabled
class="form-control mb-4" [value]="currentPartner.name" >
</div>
<ng-template #elseBlock>
<input type="text" disabled mdbInput
class="form-control mb-4" placeholder="Name" >
</ng-template>
<!-- Address -->
<input type="text" disabled mdbInput
class="form-control mb-4" placeholder="Address">
//other properties (inputs) for partner
</form>
Additonally, I need guidance on how to handle the situation in Angular; specifically, how can I show placeholder values if currentPartner is null, and display currentPartner's value otherwise?