时间戳

首页 > 解决方案 > 提交值后如何在Angular中清除模态数据

javascript - 提交值后如何在Angular中清除模态数据

问题描述

我正在使用模态将项目保存到数据库中，我想知道如何在不刷新整个网站的情况下删除以前输入的数据，因为现在当我再次单击打开模态的“添加新项目”时，存储/缓存的值在那里...

如何删除它们？例如，这是我的模态：

<div [id]="id" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <div class="modal-content dash-modal-content">
      <div class="modal-header dash-modal-header">
        <button type="button" class="close dash-close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">ADD PRODUCT</h4>
      </div>
      <form (ngSubmit)="onSubmit()">
        <div class="modal-body">

          <div class="row">
            <div class="col-xs-7">
              <div class="form-horizontal" action="">


                <div class="form-group">
                  <label class="control-label dash-control-label col-sm-3" for="">Product code:</label>
                  <div class="col-sm-5">
                    <input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleCode" [(ngModel)]="article.code" (keyup.enter)="checkCode()">
                  </div>

                  <div class="checkbox col-sm-4" style="text-align: right; padding-right: 15px;">
                    <label style="font-size: 2em">
                      <input type="checkbox" value="" checked="" name="articleIsActive" [(ngModel)]="article.isActive">
                      <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                      <span class="checkbox-label-text">Is product active?</span>
                    </label>
                  </div>
                </div>


                <div class="form-group">
                  <label class="control-label dash-control-label col-sm-3" for="">Title:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleTitle" [(ngModel)]="article.title">
                  </div>
                </div>


              </div><!--End of form horizontal-->
            </div><!--End of col-->


          </div><!--End of row-->
        </div><!--End of modal body-->
        <div class="modal-footer">
          <button type="submit" class="btn main-content-button pull-right" style="margin: 0;"><i class="fas fa-save"></i></button>
        </div>
      </form>
    </div><!--End of modal content-->
  </div>
</div>
<div>
</div>

onSubmit 我只是将数据保存到数据库中：

onSubmit() {

      this.saveArticle((savedArticle: Article): void => {
        this.onSave.emit(savedArticle);

      });
    }
   // $('#' + this.id).removeData(''); < - maybe smth like this? But don't thinks so :(
}

我想知道如何在提交值后立即清除模态的内容（文本框等）......

谢谢大家干杯

标签： javascriptangulartwitter-bootstrapbootstrap-modalangular-ui-bootstrap

解决方案

尝试

onSubmit() {

  this.saveArticle((savedArticle: Article): void => {
    this.onSave.emit(savedArticle);
    article = {}; // <---- Reset the variable
  });
}

}

推荐阅读