Angular refresh page after disable DOM field form - forms

Question

I click Buy radio button, images upload field will be removed, but when i click submit, the page refresh. It works normally when I don't affect DOM
Please, explain me what happened ?
Here is my code
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 Code
<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>