For validation

src/app/shared/components/working-hours-form/working-hours-form.component.html

@@ -1,19 +1,35 @@
 <div fxLayout='row' fxLayoutAlign='start center' fxLayoutGap='1rem' fxLayout.xs="column"
   fxLayoutAlign.xs="center start">
-  <div fxLayout='row' fxLayoutAlign='space-between' class="days-toggle">
-    <div *ngFor="let day of days" class="toggle" fxLayout='row' fxLayoutAlign='center center'
-      (click)="onToggleDays(day)" [ngClass]="(day.selected) ? 'toggle-selected' : '' ">
-      {{day.value}}</div>
+  <div>
+    <div fxLayout='row' fxLayoutAlign='space-between'
+      [ngClass]="!(workingHoursForm.get('workdays').invalid && workingHoursForm.get('workdays').touched) ? 'days-toggle' : 'days-toggle days-toggle-invalid'">
+      <div *ngFor="let day of days" class="toggle" fxLayout='row' fxLayoutAlign='center center'
+        (click)="onToggleDays(day)" [ngClass]="(day.selected) ? 'toggle-selected' : '' ">
+        {{day.value}}</div>
+    </div>
+    <app-validation-hint-for-input type="requiredField"
+      [invalid]="workingHoursForm.get('workdays').invalid && workingHoursForm.get('workdays').touched">
+    </app-validation-hint-for-input>
   </div>
 
+
   <form [formGroup]="workingHoursForm" fxLayout='row' fxLayoutAlign='center center' class="step">
     <p class="text">Від</p>
-    <input class="input step-input" type="text" [disabled]="!workingDays.length" matInput
-      [ngxMatTimepicker]="timepickerStart" format="24" required formControlName="startTime">
-
+    <div>
+      <input class="input step-input" type="text" [disabled]="!workingDays.length" matInput
+        [ngxMatTimepicker]="timepickerStart" format="24" required formControlName="startTime">
+      <app-validation-hint-for-input type="requiredField"
+        [invalid]="workingHoursForm.get('startTime').invalid && workingHoursForm.get('startTime').touched">
+      </app-validation-hint-for-input>
+    </div>
     <p class="text">До</p>
-    <input class="input  step-input" type="text" [disabled]="!workingDays.length" matInput
-      [ngxMatTimepicker]="timepickerEnd" format="24" required formControlName="endTime" [min]="getMinTime()">
+    <div>
+      <input class="input step-input" type="text" [disabled]="!workingDays.length" matInput
+        [ngxMatTimepicker]="timepickerEnd" format="24" required formControlName="endTime" [min]="getMinTime()">
+      <app-validation-hint-for-input type="requiredField"
+        [invalid]="workingHoursForm.get('endTime').invalid && workingHoursForm.get('endTime').touched">
+      </app-validation-hint-for-input>
+    </div>
   </form>
 
   <div fxLayout='row' fxLayoutAlign='center center' *ngIf="workingHoursAmount > 1">

src/app/shared/components/working-hours-form/working-hours-form.component.scss

@@ -3,6 +3,11 @@
 
 .days-toggle{
   min-width: 200px;
+  &-invalid{
+    border-radius: 21px;
+    outline: none;
+    border: 1px solid #C72A21;
+  }
 }
 .toggle{
     height: 40px;
@@ -33,7 +38,7 @@
     border-radius: 21px;
     padding:0.5rem;
     max-width: max-content;
-    max-height: 40px;
+    height: 40px;
     align-items: center;
     text-align: center;
 }

src/app/shared/components/working-hours-form/working-hours-form.component.spec.ts

@@ -9,6 +9,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgxMatTimepickerModule } from 'ngx-mat-timepicker';
 import { WorkingHoursFormComponent } from './working-hours-form.component';
 import { MaterialModule } from '../../modules/material.module';
+import { Component, Input } from '@angular/core';
 
 describe('WorkingHoursFormComponent', () => {
   let component: WorkingHoursFormComponent;
@@ -29,7 +30,8 @@ describe('WorkingHoursFormComponent', () => {
         MaterialModule
       ],
       declarations: [
-        WorkingHoursFormComponent]
+        WorkingHoursFormComponent,
+        MockValidationHintForInputComponent]
     })
       .compileComponents();
   });
@@ -49,3 +51,17 @@ describe('WorkingHoursFormComponent', () => {
     expect(component).toBeTruthy();
   });
 });
+@Component({
+  selector: 'app-validation-hint-for-input',
+  template: ''
+})
+
+class MockValidationHintForInputComponent {
+  @Input() type: string;
+  @Input() invalid: boolean;
+  @Input() isEmailCheck: boolean;
+  @Input() isEmptyCheck: boolean;
+  @Input() minLength: boolean;
+  @Input() minCharachters: number;
+  @Input() forbiddenCharacter: string;
+}

src/app/shared/components/working-hours-form/working-hours-form.component.ts

@@ -19,6 +19,7 @@ export class WorkingHoursFormComponent implements OnInit {
   @Input() workingHoursForm: FormGroup;
   @Input() index: number;
   @Input() workingHoursAmount: number;
+
   @Output() deleteWorkingHour = new EventEmitter();
 
   constructor() { }

src/app/shell/personal-cabinet/provider/create-workshop/create-about-form/create-about-form.component.html

@@ -75,7 +75,8 @@
         <p class="step-text">До</p>
         <mat-form-field>
           <input matInput class="step-input step-input-age" type="number" formControlName="maxAge" appDigitOnly
-            maxlength="2" [directiveFormControl]="AboutFormGroup.get('maxAge')" appMinMax [min]="AboutFormGroup.get('minAge').value ? AboutFormGroup.get('minAge').value + 1 : constants.AGE_MIN"
+            maxlength="2" [directiveFormControl]="AboutFormGroup.get('maxAge')" appMinMax
+            [min]="AboutFormGroup.get('minAge').value ? AboutFormGroup.get('minAge').value + 1 : constants.AGE_MIN"
             [max]="constants.AGE_MAX">
         </mat-form-field>
 
@@ -94,8 +95,6 @@
       <app-working-hours-form [workingHoursForm]="form" [workingHoursAmount]="workingHoursFormArray.controls.length"
         [index]="workingHoursFormArray.controls.indexOf(form)" (deleteWorkingHour)="deleteWorkingHour(form)">
       </app-working-hours-form>
-      <app-validation-hint-for-input type="requiredField" [invalid]="form.invalid && form.touched">
-      </app-validation-hint-for-input>
     </div>
 
 

src/app/shell/personal-cabinet/provider/create-workshop/create-workshop.component.ts

@@ -161,14 +161,21 @@ export class CreateWorkshopComponent implements OnInit, OnDestroy {
    * @param FormGroup form
    */
   checkValidation(form: FormGroup): void {
-    Object.keys(form.controls).forEach(key => {
+    Object.keys(form.controls).forEach((key: string) => {
       form.get(key).markAsTouched();
     });
     if (form.get('categories')) {
-      Object.keys((this.DescriptionFormGroup.get('categories') as FormGroup).controls).forEach(key => {
+      Object.keys((this.DescriptionFormGroup.get('categories') as FormGroup).controls).forEach((key: string) => {
         this.DescriptionFormGroup.get('categories').get(key).markAsTouched();
       });
     }
+    if (form.get('workingHours')) {
+      (this.AboutFormGroup.get('workingHours') as FormArray).controls.forEach((form: FormGroup) => {
+        Object.keys(form.controls).forEach((key: string) => {
+          form.get(key).markAsTouched();
+        });
+      })
+    }
   }
 
   /**

src/styles.scss

@@ -126,6 +126,9 @@ $config: mat-typography-config(
   background-color: #E0E0E0;
   border-radius: 5px;
 }
+.mobile-sidenav ::-webkit-scrollbar {
+  display: none;
+}
 
 .dropdownOption {
   margin-top: 35px;