How to not update the data after cancel or close the modal in Angular?-CodePudding

I have created a bootstrap NgModal. In table, after click on edit button, it contains a form with some input fields. If I click on save it is working fine but If I click on cancel it is closing but also it is updating the fields data. I want if I click on cancel it should not save the data or update the data.

app.component.ts

> import { NgbModalConfig, NgbModal, NgbModalOptions} from '@ng-bootstrap/ng-bootstrap';
>     .....
>      constructor(private config: NgbModalConfig, 
>                   private modalService: NgbModal)
>     {
>        config.backdrop = 'static';
>         config.keyboard = false; 
>     } 
>     .....
>     editCharges(event:any, content, aRow, rowIndex){
>         console.log("content of charges: ",content);
>         console.log("aRow: ",aRow);
>         console.log("rowIndex: ",rowIndex);
>         this.chargesDetail = aRow;
>         this.chargesDetail.rowIndex = rowIndex;
>         this.overrideCharges = false;
>         event.target.closest('datatable-body-cell').blur();
>         this.modalService.open(content,{size: 'lg', windowClass: 'modal-xl'}).result.then((result) => {
>             console.log("closed ", result);
>         }, (reason) => {
>           console.log("Charges.dismissed " , reason);
>         });
>       }

.....

app.component.html

<ngx-datatable-column name="Actions">
                          <ng-template ngx-datatable-cell-template let-row="row" let-rowIndex="rowIndex">
                            <a *ngIf="loggedInUser.userType !== 'RECEIVER'"  data-original-title="" title="Edit" (click)="editGoods($event, goodsContent,row, rowIndex)">
                                <i ></i>
                            </a>

....

 <ng-template #chargesContent let-c="close" let-d="dismiss">
  <div >
          <button type="button" [disabled]="!chargesForm.valid" style="margin-right: 6px;"  
            (click)="saveCharges(chargesForm);c('data saved')">
            <i ></i> Save
          </button>
          <button type="button"  data-dismiss='modal' (click)="d('cancel click')"> 
            <i ></i> Cancel
          </button>
        </div>
    
    </ng-template>

CodePudding user response：

Change the type of save button to 'submit' or transform 'cancel' button in something that isn't a button

CodePudding user response：

Apart from what is mentioned by @davimargelo , you need to define proper behavior for your form, in my opinion, you must also clear the form object after user clicks on cancel button, also I think you must define the handler name properly like given below,

Write this in your ts file,

onCancel(): void {
    this.yourFormGroupObject.reset();// This will reset the values defined inside the form
}