Missing input validation

src/app/shared/components/info-form/info-form.component.html

@@ -3,38 +3,38 @@
   fxLayout="column"
   fxLayoutAlign="center space-between"
   class="step"
-  [class.step-border]="formAmount > 1 && index !== formAmount - 1">
+  [class.step-border]="formAmount > 1 && index !== formAmount - 1"
+>
   <label class="step-label">{{ 'FORMS.LABELS.SECTION_TITLE' | translate }}<span class="step-required">*</span></label>
   <mat-form-field>
     <input matInput class="step-input" type="text" formControlName="sectionName" appTrimValue />
   </mat-form-field>
   <app-validation-hint
     [validationFormControl]="InfoEditFormGroup.get('sectionName')"
     [minCharachters]="validationConstants.INPUT_LENGTH_3"
-    [maxCharachters]="validationConstants.INPUT_LENGTH_256">
+    [maxCharachters]="validationConstants.INPUT_LENGTH_100"
+  >
   </app-validation-hint>
 
   <div class="step-label-combined">
     <label class="step-label"> {{ 'TITLES.DESCRIPTION' | translate }} <span class="step-required">*</span></label>
-    <label class="step-characters-count">
-      {{ InfoEditFormGroup.get('description').value.length }}/{{ maxDescriptionLength }}</label
-    >
+    <label class="step-characters-count"> {{ InfoEditFormGroup.get('description').value.length }}/{{ maxDescriptionLength }}</label>
   </div>
   <mat-form-field appearance="none">
     <textarea
       matInput
       class="step-textarea"
-      placeholder="{{ 'FORMS.PLACEHOLDERS.MAXIMUM' | translate }} {{ maxDescriptionLength }} {{
-        'FORMS.PLACEHOLDERS.SYMBOLS' | translate
-      }}"
+      placeholder="{{ 'FORMS.PLACEHOLDERS.MAXIMUM' | translate }} {{ maxDescriptionLength }} {{ 'FORMS.PLACEHOLDERS.SYMBOLS' | translate }}"
       formControlName="description"
       maxlength="{{ maxDescriptionLength }}"
-      appTrimValue></textarea>
+      appTrimValue
+    ></textarea>
   </mat-form-field>
   <app-validation-hint
     [validationFormControl]="InfoEditFormGroup.get('description')"
     [minCharachters]="validationConstants.INPUT_LENGTH_3"
-    [maxCharachters]="maxDescriptionLength">
+    [maxCharachters]="maxDescriptionLength"
+  >
   </app-validation-hint>
 
   <div fxLayout="row" fxLayoutAlign="center" *ngIf="formAmount > 1">

src/app/shared/constants/validation.ts

@@ -1,4 +1,5 @@
 import { ValidatorFn, Validators } from '@angular/forms';
+
 import { NO_LATIN_REGEX } from './regex-constants';
 
 export class ValidationConstants {
@@ -21,6 +22,7 @@ export class ValidationConstants {
 
   // Input Length
   static readonly INPUT_LENGTH_256 = 256;
+  static readonly INPUT_LENGTH_100 = 100;
   static readonly INPUT_LENGTH_60 = 60;
   static readonly INPUT_LENGTH_30 = 30;
   static readonly INPUT_LENGTH_10 = 10;

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

@@ -1,14 +1,19 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+  AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, Validators
+} from '@angular/forms';
 import { Store } from '@ngxs/store';
-import { CropperConfigurationConstants, Constants } from '../../../../../shared/constants/constants';
+
+import {
+  Constants, CropperConfigurationConstants
+} from '../../../../../shared/constants/constants';
 import { ValidationConstants } from '../../../../../shared/constants/validation';
 import { Provider, ProviderSectionItem } from '../../../../../shared/models/provider.model';
 
 @Component({
   selector: 'app-create-photo-form',
   templateUrl: './create-photo-form.component.html',
-  styleUrls: ['./create-photo-form.component.scss'],
+  styleUrls: ['./create-photo-form.component.scss']
 })
 export class CreatePhotoFormComponent implements OnInit {
   readonly validationConstants = ValidationConstants;
@@ -21,7 +26,7 @@ export class CreatePhotoFormComponent implements OnInit {
     cropperAspectRatio: CropperConfigurationConstants.galleryImagesCropperAspectRatio,
     croppedHeight: CropperConfigurationConstants.croppedGalleryImage.height,
     croppedFormat: CropperConfigurationConstants.croppedFormat,
-    croppedQuality: CropperConfigurationConstants.croppedQuality,
+    croppedQuality: CropperConfigurationConstants.croppedQuality
   };
 
   @Input() provider: Provider;
@@ -44,13 +49,13 @@ export class CreatePhotoFormComponent implements OnInit {
       providerSectionItems: this.SectionItemsFormArray,
       website: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)]),
       facebook: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)]),
-      instagram: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)]),
+      instagram: new FormControl('', [Validators.maxLength(ValidationConstants.INPUT_LENGTH_256)])
     });
   }
 
   ngOnInit(): void {
     this.passPhotoFormGroup.emit(this.PhotoFormGroup);
-    if(this.provider) {
+    if (this.provider) {
       this.activateEditMode();
     } else {
       this.onAddForm();
@@ -77,12 +82,16 @@ export class CreatePhotoFormComponent implements OnInit {
    */
   private newForm(item?: ProviderSectionItem): FormGroup {
     this.editFormGroup = this.formBuilder.group({
-      sectionName: new FormControl('', [Validators.required]),
-      description: new FormControl('', [
+      sectionName: new FormControl('', [
         Validators.required,
         Validators.minLength(ValidationConstants.INPUT_LENGTH_3),
-        Validators.maxLength(ValidationConstants.MAX_DESCRIPTION_LENGTH_2000),
+        Validators.maxLength(ValidationConstants.INPUT_LENGTH_100)
       ]),
+      description: new FormControl('', [
+        Validators.required,
+        Validators.minLength(ValidationConstants.INPUT_LENGTH_3),
+        Validators.maxLength(ValidationConstants.MAX_DESCRIPTION_LENGTH_2000)
+      ])
     });
 
     if (this.provider) {