Html – Clear Bootstrap Modal Form after cancel button is clicked inside Modal

I have a bootstrap modal with some inputs that I want to clear and have the modal close if I click the cancel button. It will obviously reset if I refresh the page but I simply want to be able to enter some data into the form fields, click the Cancel button and have the modal immediately close, then once it is closed click to open the modal again and have the form fields be empty.

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog bodyWidth">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">Add Data Point</h4>
  </div>
  <div class="modal-body">
    <form class="form-inline" [formGroup]="modalForm" (ngSubmit)="submitForm(modalForm.value)">
      <div class="row">
        <div class="form-group" [ngClass]="{'has-error':!modalForm.controls['dataPoint'].valid && modalForm.controls['dataPoint'].touched}">
          <label>Data Point:</label>
          <input class="form-control special" type="text" class="form-control special"  placeholder="Enter a data point" [formControl]="modalForm.controls['dataPoint']">
        </div>
        <div class="form-group" [ngClass]="{'has-error':!modalForm.controls['ICCP'].valid && modalForm.controls['ICCP'].touched}">
          <label >ICCP:</label>
          <input type="text" class="form-control special" placeholder="Enter an ICCP" [formControl]="modalForm.controls['ICCP']">
        </div>
        <div class="form-group" [ngClass]="{'has-error':!modalForm.controls['startDate'].valid && modalForm.controls['startDate'].touched}">
          <label>Start Date:</label>
          <input class="form-control special" type="text" placeholder="Select a start date" [formControl]="modalForm.controls['startDate']" style="margin-right: 4px;">
        </div>
        <div class="form-group" [ngClass]="{'has-error':!modalForm.controls['endDate'].valid && modalForm.controls['endDate'].touched}">
          <label >End Date:</label>
          <input type="text" class="form-control special" placeholder="Enter an end date" [formControl]="modalForm.controls['endDate']">
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <div style="float: left;">*All Fields Are Required</div>
    <button type="submit" class="btn" [disabled]="!modalForm.valid" data-dismiss="modal">Add</button>
    <button type="submit" (click)="resetForm()" class="btn" data-dismiss="modal" ng-click>Cancel</button>
  </div>
</div>

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
 selector: 'add-validation',
 styleUrls: ['../app/app.component.css'],
 templateUrl: 'add.component.html'
})
export class AddComponent {
modalForm : FormGroup;

 constructor(fb: FormBuilder){
   this.modalForm = fb.group({
  'dataPoint' : [null, Validators.required],
  'ICCP' : [null, Validators.required],
  'startDate' : [null, Validators.required],
  'endDate' : [null, Validators.required]
})
console.log(this.modalForm);
this.modalForm.valueChanges.subscribe( (form: any) => {
    console.log('form changed to:', form);
  }
);
}

submitForm(value: any){
  console.log(value);
}

resetForm(){
 this.modalForm = new FormGroup();
}
}