project-timesheet.component.html

<div class="timesheet-project-container">
    <form [formGroup]="projectForm">
        <span id="projectForm">
            <div class="project-header">
                <div class="header-cells header-cell-one">Project</div>
                <span class="row-block">
                    <div class="header-cells">SUN: {{ sunday | date:'MM/dd'}}</div>
                    <div class="header-cells">MON: {{ monday | date:'MM/dd'}}</div>
                    <div class="header-cells">TUE: {{ tuesday | date:'MM/dd'}}</div>
                    <div class="header-cells">WED: {{ wednesday | date:'MM/dd'}}</div>
                    <div class="header-cells">THU: {{ thursday | date:'MM/dd'}}</div>
                    <div class="header-cells">FRI: {{ friday | date:'MM/dd'}}</div>
                    <div class="header-cells">SAT: {{ saturday | date:'MM/dd'}}</div>
                    <div class="header-cells header-cell-nine">TOTAL</div>
                </span>

            </div>
            <span formArrayName="projectTime">
                <div *ngFor="let item of projectTime.controls; let i = index" [formGroupName]="i" class="project-rows">
                    <div class="project-cells cell-one">
                        {{item.get('projectDesc').value}}
                    </div>

                    <span class="row-block" formGroupName="hoursHashMap">
                        <div class="project-cells"
                            [matTooltip]="item.get('hoursHashMap.Sunday.hours').invalid ? 'Hours must be between 0 and 24' : ''">
                            <div class="time-cells" formGroupName="Sunday">
                                <input matInput formControlName="hours" class="hour-inputs" type="number" min="0"
                                    max="24" [ngClass]="{'hours-error': item.get('hoursHashMap.Sunday.hours').invalid}">
                                <button (click)="openProjectInputDialog('Sunday',
                                     i, item.get('hoursHashMap.Sunday').value, item.get('clientName').value,
                                      item.get('projectDesc').value, sunday)" class="btn">
                                    <span matRipple class="material-icons">
                                        menu
                                    </span>
                                </button>
                            </div>
                        </div>

                        <div class="project-cells" formGroupName="Monday"
                            [matTooltip]="item.get('hoursHashMap.Monday.hours').invalid ? 'Hours must be between 0 and 24' : ''">
                            <div class="time-cells">
                                <input formControlName="hours" class="hour-inputs" type="number" min="0" max="24"
                                    [ngClass]="{'hours-error': item.get('hoursHashMap.Monday.hours').invalid}">
                                <button (click)="openProjectInputDialog('Monday',
                                     i, item.get('hoursHashMap.Monday').value, item.get('clientName').value,
                                      item.get('projectDesc').value, monday)" class="btn">
                                    <span matRipple class="material-icons">
                                        menu
                                    </span>
                                </button>
                            </div>
                        </div>

                        <div class="project-cells" formGroupName="Tuesday"
                            [matTooltip]="item.get('hoursHashMap.Tuesday.hours').invalid ? 'Hours must be between 0 and 24' : ''">
                            <div class="time-cells">
                                <input formControlName="hours" class="hour-inputs" type="number" min="0" max="24"
                                    [ngClass]="{'hours-error': item.get('hoursHashMap.Tuesday.hours').invalid}">
                                <button (click)="openProjectInputDialog('Tuesday',
                                     i, item.get('hoursHashMap.Tuesday').value, item.get('clientName').value,
                                      item.get('projectDesc').value, tuesday)" class="btn">
                                    <span matRipple class="material-icons">
                                        menu
                                    </span>
                                </button>
                            </div>
                        </div>

                        <div class="project-cells" formGroupName="Wednesday"
                            [matTooltip]="item.get('hoursHashMap.Wednesday.hours').invalid ? 'Hours must be between 0 and 24' : ''">
                            <div class="time-cells">
                                <input formControlName="hours" class="hour-inputs" type="number" min="0" max="24"
                                    [ngClass]="{'hours-error': item.get('hoursHashMap.Wednesday.hours').invalid}">
                                <button (click)="openProjectInputDialog('Wednesday',
                                     i, item.get('hoursHashMap.Wednesday').value, item.get('clientName').value,
                                      item.get('projectDesc').value, wednesday)" class="btn">
                                    <span matRipple class="material-icons">
                                        menu
                                    </span>
                                </button>
                            </div>

                        </div>

                        <div class="project-cells" formGroupName="Thursday"
                            [matTooltip]="item.get('hoursHashMap.Thursday.hours').invalid ? 'Hours must be between 0 and 24' : ''">
                            <div class="time-cells">
                                <input formControlName="hours" class="hour-inputs" type="number" min="0" max="24"
                                    [ngClass]="{'hours-error': item.get('hoursHashMap.Thursday.hours').invalid}">
                                <button (click)="openProjectInputDialog('Thursday',
                                     i, item.get('hoursHashMap.Thursday').value, item.get('clientName').value,
                                      item.get('projectDesc').value, thursday)" class="btn">
                                    <span matRipple class="material-icons">
                                        menu
                                    </span>
                                </button>
                            </div>
                        </div>

                        <div class="project-cells" formGroupName="Friday"
                            [matTooltip]="item.get('hoursHashMap.Friday.hours').invalid ? 'Hours must be between 0 and 24' : ''">
                            <div class="time-cells">
                                <input formControlName="hours" class="hour-inputs" type="number" min="0" max="24"
                                    [ngClass]="{'hours-error': item.get('hoursHashMap.Friday.hours').invalid}">
                                <button (click)="openProjectInputDialog('Friday',
                                     i, item.get('hoursHashMap.Friday').value, item.get('clientName').value,
                                      item.get('projectDesc').value, friday)" class="btn">
                                    <span matRipple class="material-icons">
                                        menu
                                    </span>
                                </button>
                            </div>
                        </div>

                        <div class="project-cells" formGroupName="Saturday"
                            [matTooltip]="item.get('hoursHashMap.Saturday.hours').invalid ? 'Hours must be between 0 and 24' : ''">
                            <div class="time-cells">
                                <input formControlName="hours" class="hour-inputs" type="number" min="0" max="24"
                                    [ngClass]="{'hours-error': item.get('hoursHashMap.Saturday.hours').invalid}">
                                <button (click)="openProjectInputDialog('Saturday',
                                     i, item.get('hoursHashMap.Saturday').value, item.get('clientName').value,
                                      item.get('projectDesc').value, saturday)" class="btn">
                                    <span matRipple class="material-icons">
                                        menu
                                    </span>
                                </button>
                            </div>
                        </div>

                        <ng-container *ngFor="let weekTotal of projectWeekTotals let iTwo = index">
                            <span *ngIf="i == iTwo" class="project-cells cell-nine">
                                {{ weekTotal }}
                            </span>
                        </ng-container>

                    </span>
                </div>
            </span>
        </span>
    </form>