course-edit-modal.component.html

<div class="modal-header">
    <h5 class="modal-title">{{title}}</h5>
    <button
      type="button"
      class="close"
      data-dismiss="modal"
      aria-label="Close"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form [formGroup]="formGroup" (ngSubmit)="onSave(formGroup.value)">
      <div class="form-group">
        <label for="title">Title</label>
        <input
          formControlName="title"
          type="text"
          class="form-control"
          id="title"
          placeholder="Enter Course Title"
        />
      </div>
      <div class="form-group">
        <label for="title">Price ($)</label>
        <input
          formControlName="price"
          type="number"
          class="form-control"
          id="price"
          placeholder="00.00"
        />
      </div>
      <div class="form-group">
        <label for="title">Img Url</label>
        <input
          formControlName="imgUrl"
          type="string"
          class="form-control"
          id="imgUrl"
          placeholder="Eg. https://reactjs.org/logo-og.png"
        />
      </div>
      <div class="form-group">
        <label for="title">Description</label>
        <textarea
          formControlName="description" 
          rows="5"
          class="form-control"
          id="desc"
          placeholder="Enter Description"
        ></textarea>
      </div>
      <div class="modal-footer">
        <button 
        [disabled]="formGroup.status === 'INVALID'"
        type="submit" class="btn btn-primary">Save</button>
        <button 
        (click)="onClose()"
        type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
      </div>
    </form>
  </div>