todo-form.component.html

<div class="modal-header">
 <h4 class="modal-title">Create Todo</h4>

 <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
   <span aria-hidden="true">&times;</span>
 </button>
</div>

<div class="modal-body">
 <form [formGroup]="todoForm" (ngSubmit)="saveTodo()">
   <div class="form-group">
     <label for="title">Title*</label>
     <input type="text" id="title" placeholder="Title" class="form-control" formControlName="title" />
     <span style="color:Red;" *ngIf="todoForm.controls['title'].touched && todoForm.controls['title'].errors?.required">Title
       is required.</span>
   </div>
   <div class="form-group">
     <label for="description">Description*</label>
     <textarea  id="description" placeholder="Description" class="form-control" formControlName="description"></textarea>
     <span style="color:rgb(238, 235, 235);" *ngIf="todoForm.controls['description'].touched && todoForm.controls['description'].errors?.required">Description
       is required.</span>
   </div>

   <div class="form-check">
     <input class="form-check-input" type="checkbox" value="" id="done" formControlName="done">
     <label class="form-check-label" for="done">
       Done
     </label>
   </div>
 </form>
</div>

<div class="modal-footer">
 <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
 <button class="btn btn-primary" (click)="saveTodo()" [disabled]="todoForm.invalid">Save</button>
</div>