Как очистить модальные данные в Angular после отправки значений - PullRequest
Новая
       24

Как очистить модальные данные в Angular после отправки значений

0 голосов
/ 29 мая 2018

Я использую модальные для сохранения элементов в базе данных, и мне интересно, как удалить ранее введенные данные без обновления всего сайта, потому что сейчас, когда я нажимаю снова «Добавить новый элемент», который открывает модальные, там сохраняются/ кэшированные значения в сферу ...

Как их убрать?Например, вот мой мод: 

<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 :(
}

Мне интересно, как сразу после отправки значений очистить содержимое модала(текстовые поля и т. д.) ...

Спасибо, ребята, ура

1 Ответ

0 голосов
/ 29 мая 2018

Попробуйте 

onSubmit() {

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

}

...