禁用DOM字段表单后的Angular刷新页面

Question

我点击购买单选按钮，图片上传字段将被删除，但是当我点击提交时，页面会刷新。当我不影响DOM时，它正常工作

请解释一下发生了什么事？

这是我的代码

onSubmitPost() {
    this.progress = true;
    const fileList: FileList = this.event.target.files;
    if (fileList.length > 0) {
      const fileListLength = fileList.length;
      const formData: FormData = new FormData();
      formData.append('title', this.title);
      formData.append('telephone', this.telephone);
      formData.append('description', this.description);
      formData.append('city', this.city);
      if (this.isSell === true) {
        for (let x = 0; x < fileListLength; x++) {
          formData.append('thumbnail', fileList[x]);
        }
      }
      const headers = new Headers();
      headers.append('Accept', 'application/json');
      headers.append('Authorization', 'clientId 7702919f7e72965');

      this.http
        .post('http://localhost:3000/api/post', formData, {
          headers: headers
        })
        .map(res => res.json())
        .subscribe(
          data => {
            this.Notificationervice.success('Success');
            this.progress = false;
          },
          error => this.Notificationervice.error('Something wrong')
        );
    }
  }
}

HTML代码

<div id="new-post" class="modal" materialize="modal">
  <div class="modal-content">
    <div class="row">
      <form class="col s12" (submit)="onSubmitPost()" enctype="multipart/form-data">
        <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">web</i>
            <input id="icon_prefix" type="text" class="validate" name="title" [(ngModel)]="title">
            <label for="icon_prefix">Title</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">phone</i>
            <input id="icon_telephone" type="tel" class="validate" name="telephone" [(ngModel)]="telephone">
            <label for="icon_telephone">Telephone</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">mode_edit</i>
            <textarea id="icon_prefix2" class="materialize-textarea" [(ngModel)]="description" name="description"></textarea>
            <label for="icon_prefix2">Description</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">location_on</i>
            <input type="text" id="autocomplete-input" class="autocomplete" materialize="autocomplete" [materializeParams]="[{'data': {'houston': null, 'Cali': null}}]"
              [(ngModel)]="city" name="city">
            <label for="autocomplete-input">City</label>
          </div>
        </div>
        <div class="row">
          <div class="col s6">
            <p>
              <input name="isSell" type="radio" id="buy" (change)="isSell = !isSell" [checked]="!isSell" />
              <label for="buy">Buy</label>
            </p>
          </div>
          <div class="col s6">
             <p>
              <input name="isSell" type="radio" id="sell" (change)="isSell = !isSell" [checked]="isSell" />
              <label for="sell">Sell</label>
            </p>
          </div>
        </div>
        <div class="file-field input-field" *ngIf="isSell">
          <div class="btn">
            <span>Images</span>
            <input type="file" multiple accept='image/*' name="post" (change)="onChange($event)">
          </div>
          <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
          </div>
        </div>
        <div class="modal-footer">
          <input type="submit" class="modal-action modal-close waves-effect waves-green btn-flat" value="Submit">
        </div>
      </form>
    </div>
  </div>
</div>