0

我创建了一个引导程序 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>
4

2 回答 2

0

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

于 2021-12-20T11:51:13.643 回答
0

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

把它写在你的 ts 文件中，

onCancel(): void {
    this.yourFormGroupObject.reset();// This will reset the values defined inside the form
}
于 2021-12-20T12:11:46.103 回答