在Angular中取消或关闭模式后如何不更新数据？

Posted 2023-03-13

【中文标题】在Angular中取消或关闭模式后如何不更新数据？

【英文标题】：How to not update the data after cancel or close the modal in Angular?

【发布时间】：2022-01-22 00:53:49

【问题描述】：

我创建了一个引导 NgModal。在表格中，点击编辑后 按钮，它包含一个带有一些输入字段的表单。如果我点击保存 它工作正常，但如果我点击取消它正在关闭，但它 正在更新字段数据。我想如果我点击取消它不应该 保存数据或更新数据。

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'" class="success p-0" data-original-title="" title="Edit" (click)="editGoods($event, goodsContent,row, rowIndex)">
                                <i class="ft-edit-2 font-large-1 mr-2"></i>
                            </a>

....

 <ng-template #chargesContent let-c="close" let-d="dismiss">
  <div class="modal-footer">
          <button type="button" [disabled]="!chargesForm.valid" style="margin-right: 6px;" class="btn btn-raised btn-primary" 
            (click)="saveCharges(chargesForm);c('data saved')">
            <i class="fa fa-check-square-o"></i> Save
          </button>
          <button type="button" class="btn btn-raised btn-warning mr-1" data-dismiss='modal' (click)="d('cancel click')"> 
            <i class="ft-x"></i> Cancel
          </button>
        </div>
    
    </ng-template>

【参考方案1】：

除了@davimargelo 提到的，您需要为您的表单定义正确的行为，在我看来，您还必须在用户单击取消按钮后清除表单对象，我认为您必须正确定义处理程序名称如下所示，

把这个写在你的ts文件里，

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

【讨论】：

我试过了，但它也会像之前编辑过的一样重置保存的数据。现在数据是空白的。我不需要

你能告诉我你所有的代码吗？我也许能提供更好的帮助？

【参考方案2】：

将保存按钮的类型更改为“提交”或将“取消”按钮转换为非按钮

【讨论】：

它不工作