project-modal.html

<div mat-dialog-content class="dialog-container">
    <header>
        <div>Tasks for {{dayOfWeek}}</div>
        <div>{{ client }}: {{ projectDesc }}</div>
        <div class="timesheet-hours">Timesheet Hours: <span
                [ngClass]="{'red-text': hoursExceedTimesheet}">{{ enteredHours }}</span> / {{ timesheetHours }}</div>
    </header>
    <div class="input-container">
        <form [formGroup]="taskForm">
            <span class="header-row">
                <div class="header-cells">Task/Description</div>
                <div class="header-cells">Hours</div>
                <div class="header-cells">Comments</div>
                <div class="header-cells">Include In Report</div>
            </span>
            <span formArrayName="tasks" *ngFor="let item of taskCtrl.controls; let i = index;">
                <span [formGroupName]="i" class="data-rows border-animation" [ngClass]="{'background-row': isEven(i)}">
                    <div class="data-cells">
                        <mat-form-field>
                            <textarea (keyup.enter)="addTask()" formControlName="taskDesc" matInput type="text"></textarea>
                        </mat-form-field>
                    </div>
                    <div class="data-cells">
                        <mat-form-field class="hours">
                            <input (keyup.enter)="addTask()" formControlName="hours"
                             matInput type="number" class="hour-input" min="0" max="24">
                            <mat-error *ngIf="item.get('hours').invalid">Must be within 24 hours</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="data-cells">
                        <mat-form-field>
                            <textarea (keyup.enter)="addTask()" formControlName="comments" matInput></textarea>
                        </mat-form-field>
                    </div>
                    <div class="data-cells">
                        <section class="checkbox">
                            <mat-checkbox formControlName="statusReportFlag"></mat-checkbox>
                        </section>
                    </div>
                </span>
            </span>
        </form>
    </div>
    <p>Press ENTER to add a new row</p>
    <p>(leave Task/Description empty to delete the task)</p>
</div>
<footer>
    <button class="close-OK-btns" mat-raised-button color="warn" mat-dialog-close>
        Close
    </button>
    <button (click)="saveTasks()" class="close-OK-btns" mat-raised-button color="primary" mat-dialog-close>
        OK
    </button>
</footer>