如何在提交Angular 6时重置我的图像预览和ck编辑器

Question

 onSubmit() {

    // this.spinnerService.show();
    // setTimeout(()=>this.spinnerService.hide(),2000)
    //  window.location.reload();
    this.createBlogInfo['image'] = (this.url);
    this._userService.createBlog({blog: this.createBlogInfo})
        .subscribe(
          res => {

            this.myBlog.unshift(res.blogs);
            this._userService.getdata = res.message
            this.blogInfo.reset();
            this.message = this._userService.getdata;
            setTimeout(function() {
              $('.alert').fadeTo(500, 0).slideUp(500);
             }, 3000);
            // console.log(this.url.value)
          },
          err => console.log('error')
        );
  }

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

                <!-- Modal content-->
                <div class="modal-content">
                  <form novalidate #blogInfo="ngForm" (submit)="onSubmit(blogInfo)">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Create Blog</h4>
                  </div>
                  <div class="modal-body">
                    <div class="form-group">
                    <label>Import Image</label>
                      <div class="profile-bg">
                        <img [src]="url || '../../assets/img/blog/bg-blog.png'" id="blah-bg" (click)="file.click()">
                        <input type="file" class="fileLoader-bg" name="image" title="Load File" required [(ngModel)]="createBlogInfo.image" #file accept="image/*" #imageFile="ngModel" [class.is-invalid]="imageFile.invalid && imageFile.untouched"  (change)="onSelectFile($event)" requireFile/>

                        <small class="text-danger" [hidden]="imageFile.valid || imageFile.untouched">Image is required</small>
                      </div>
                    </div>
                <div class="form-group">
                       <label>Title</label>
                       <input type="text" name="title" class="form-control" placeholder="Title..." required [(ngModel)]="createBlogInfo.title"
                       #title="ngModel" [class.is-invalid]="title.invalid && title.untouched">
                       <small class="text-danger" [hidden]="title.valid || title.untouched">Title is required</small>
                </div>
                <div class="form-group">
                  <label>About Blog</label>
                  <ck-editor name="description" [(ngModel)]="createBlogInfo.description" skin="moono-lisa" language="en" [fullPage]="true" [config]="{extraPlugins: 'divarea'}"  #descriptionInfo="ngModel" [class.is-invalid]="descriptionInfo.invalid && descriptionInfo.untouched" required ></ck-editor>

                  <small class="text-danger" [hidden]="descriptionInfo.valid || descriptionInfo.untouched">Description is required</small>
                </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-success " [disabled]="blogInfo.invalid" data-dismiss="modal" (click)="onSubmit()">Publish</button>
                    <button type="button" class="btn btn-success " [disabled]="blogInfo.invalid" data-dismiss="modal" >Save</button>
                  </div>
                  </form>
                </div>

              </div>
            </div>

我已填写表格，然后上传。它正在运行，但是当我检查表单时，无法重置该表单。我已经上传了我的错误和表单字段。任何人都知道提交后如何重设我的ck编辑器，图像预览。 enter image description here。请提出任何建议。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

t我的ck编辑器，提交后的图像预览。 enter image description here