['Редагування закладу' page] Incorrect validation of the 'Опис' field (…

…#1041) * feat: add hint * feat: add hint min max * feat: add regex * feat: add new message * feat: add text validation * fix: test * fix: add space to regex
ita-social-projects · Apr 6, 2022 · 70a34f4 · 70a34f4
1 parent dee42e0
commit 70a34f4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 4 deletions.
diff --git a/src/app/shared/components/validation-hint-for-input/validation-hint-for-input.component.html b/src/app/shared/components/validation-hint-for-input/validation-hint-for-input.component.html
@@ -4,6 +4,7 @@
 <ng-container *ngIf = "type === 'minDigitsLength' && minLength && invalid; then notEnoughDigits"></ng-container>
 <ng-container *ngIf = "type === 'minCharachtersLengthFOP' && minLength && invalid; then notEnoughCharactersFOP"></ng-container>
 <ng-container *ngIf = "type === 'validTextField' && forbiddenCharacter && invalid; then incorrectTextField"></ng-container>
+<ng-container *ngIf = "type === 'validTextFieldWithSymbols' && forbiddenCharacter && invalid; then incorrectTextFieldWithSymbols"></ng-container>
 <ng-container *ngIf = "type === 'validAddressField' && forbiddenCharacter && invalid; then incorrectAddressField"></ng-container>
 <ng-container *ngIf = "type === 'validBuildingNumberField' && forbiddenCharacter && invalid; then incorrectBuildingNumberField"></ng-container>
 <ng-container *ngIf = "type === 'validDateFormat' && invalid && !minMaxDate; then incorrectDateField"></ng-container>
@@ -41,6 +42,11 @@
     Перевірте введені дані. <br> Використовуйте, будь ласка, тільки кирилицю та символи ( ' - )
   </small> 
 </ng-template>
+<ng-template #incorrectTextFieldWithSymbols>
+  <small appValidationMessageStyling>
+    Перевірте введені дані. <br> Не використовуйте, будь ласка, спец. символи
+  </small> 
+</ng-template>
 
 <ng-template #incorrectDateField>
   <small appValidationMessageStyling>

diff --git a/src/app/shared/constants/regex-constants.ts b/src/app/shared/constants/regex-constants.ts
@@ -4,6 +4,7 @@
 
 export const TEXT_REGEX: RegExp = /^\S[А-Яа-яЇїІіЄєЁёҐґ'’\s-]*$/;
 export const TEXT_WITH_DIGITS_REGEX: RegExp = /^[А-Яа-яЇїІіЄєЁёҐґ'’.,\s\d\/-]*$/;
+export const TEXT_WITH_DIGITS_AND_SYMBOLS_REGEX: RegExp = /^[A-Za-zА-Яа-яЇїІіЄєЁёҐґ0-9.,_\-!@#$%^&*()+={}\\|/<>~`':;"\s]*$/;
 export const DATE_REGEX: RegExp = /[^0-9./-]*/g;
 export const NAME_REGEX: RegExp = /^[А-Яа-яЇїІіЄєЁёҐґ'’-]*$/;
 export const BIRTH_CERTIFICATE_REGEX: RegExp = /^[A-Za-zА-Яа-яЇїІіЄєЁёҐґ'’\s\d-№]*$/;

diff --git a/...sonal-cabinet/provider/create-provider/create-photo-form/create-photo-form.component.html b/...sonal-cabinet/provider/create-provider/create-photo-form/create-photo-form.component.html
@@ -15,11 +15,22 @@
   <label class="step-label"> Опис <span class="step-required">*</span></label>
   <mat-form-field appPlaceholderStyling floatLabel="never" appearance="none">
     <div class="wrapper-border">
-      <textarea matInput class="step-textarea" placeholder="Максимум {{constants.MAX_DESCRIPTION_LENGTH}} символів"
-        formControlName="description" maxlength="{{constants.MAX_DESCRIPTION_LENGTH}}"></textarea>
+      <textarea matInput class="step-textarea" placeholder="Максимум {{constants.MAX_DESCRIPTION_ABOUT_LENGTH}} символів"
+        formControlName="description" minlength="3" maxlength="{{constants.MAX_DESCRIPTION_ABOUT_LENGTH}}"></textarea>
     </div>
   </mat-form-field>
   <app-validation-hint-for-input type="requiredField"
-    [invalid]="PhotoFormGroup.get('description').invalid && PhotoFormGroup.get('description').touched">
+  [invalid]="PhotoFormGroup.get('description').errors?.required && PhotoFormGroup.get('description').touched">    
+  </app-validation-hint-for-input>
+  <app-validation-hint-for-input type="validTextFieldWithSymbols"
+    [invalid]="PhotoFormGroup.get('description').invalid && PhotoFormGroup.get('description').touched"
+    [forbiddenCharacter]="PhotoFormGroup.get('description').errors?.pattern?.requiredPattern">
+  </app-validation-hint-for-input>
+  <app-validation-hint-for-input type="validLength"
+    [minLength]="PhotoFormGroup.get('description').errors?.minlength"
+    [maxLength]="PhotoFormGroup.get('description').errors?.maxlength"
+    [invalid]="PhotoFormGroup.get('description').invalid && PhotoFormGroup.get('description').touched"
+    [minCharachters]="3"
+    [maxCharachters]="constants.MAX_DESCRIPTION_ABOUT_LENGTH">
   </app-validation-hint-for-input>
 </form>
diff --git a/...al-cabinet/provider/create-provider/create-photo-form/create-photo-form.component.spec.ts b/...al-cabinet/provider/create-provider/create-photo-form/create-photo-form.component.spec.ts
@@ -66,6 +66,8 @@ class MockValidationHintForInputComponent {
   @Input() isEmailCheck: boolean;
   @Input() isEmptyCheck: boolean;
   @Input() minLength: boolean;
+  @Input() maxLength: boolean;
   @Input() minCharachters: number; 
+  @Input() maxCharachters: number; 
   @Input() forbiddenCharacter: string;
 }
diff --git a/...ersonal-cabinet/provider/create-provider/create-photo-form/create-photo-form.component.ts b/...ersonal-cabinet/provider/create-provider/create-photo-form/create-photo-form.component.ts
@@ -4,6 +4,7 @@ import { Select, Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { Constants } from 'src/app/shared/constants/constants';
+import { TEXT_WITH_DIGITS_AND_SYMBOLS_REGEX } from 'src/app/shared/constants/regex-constants';
 import { InstitutionStatus } from 'src/app/shared/models/institutionStatus.model';
 import { Provider } from 'src/app/shared/models/provider.model';
 import { GetInstitutionStatus } from 'src/app/shared/store/meta-data.actions';
@@ -33,7 +34,7 @@ export class CreatePhotoFormComponent implements OnInit {
   constructor(private formBuilder: FormBuilder, private store: Store) {
     this.PhotoFormGroup = this.formBuilder.group({
       image: new FormControl(''),
-      description: new FormControl('', Validators.required),
+      description: new FormControl('', [Validators.required, Validators.pattern(TEXT_WITH_DIGITS_AND_SYMBOLS_REGEX)]),
       institutionStatusId: new FormControl(Constants.INSTITUTION_STATUS_ID_ABSENT_VALUE),
     });
   }