How to clear modal's data in Angular after submiting values

Question

I'm using modal to save items to a database, and I'm wondering how to remove previously entered data without refreshing whole website, because right now when I click again "Add new item" which is opening modal there are stored / cached values inthere...

How to remove them ? For example here is my modal:

<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 I'm simply saving data to a database:

onSubmit() {

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

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

I'm wondering how to immediately after submiting values to clear modal's content (text boxes etc)...

Thanks guys Cheers

Answer 1

Try

onSubmit() {

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

}