From 37eb7b7533b93c06c78dd11411129f25d0062f4d Mon Sep 17 00:00:00 2001 From: SlavomirMazurPantheon <67378888+SlavomirMazurPantheon@users.noreply.github.com> Date: Wed, 27 Jul 2022 15:27:16 +0200 Subject: [PATCH] fix: check if regex is valid is using regex search (#99) - check whether regex expression is actually valid before sending request to the backend Signed-off-by: Slavomir Mazur --- src/app/core/yc-validations.service.ts | 22 +++++++++++++++---- .../yang-search/yang-search.component.html | 6 ++--- .../yang-search/yang-search.component.ts | 17 ++++++++++++-- .../api-overview/api-overview.component.ts | 1 + 4 files changed, 37 insertions(+), 9 deletions(-) diff --git a/src/app/core/yc-validations.service.ts b/src/app/core/yc-validations.service.ts index 0ed4efe..83bff42 100644 --- a/src/app/core/yc-validations.service.ts +++ b/src/app/core/yc-validations.service.ts @@ -1,6 +1,5 @@ import { Injectable } from '@angular/core'; -import { AbstractControl, AsyncValidatorFn, ValidationErrors, ValidatorFn } from '@angular/forms'; -import { Observable, of } from 'rxjs'; +import { AbstractControl, ValidatorFn } from '@angular/forms'; @Injectable({ providedIn: 'root' @@ -10,10 +9,25 @@ export class YcValidationsService { constructor() { } getNumberValidation(): ValidatorFn { - return (control: AbstractControl): {[key: string]: any} => { - return (control.value && (!Number(control.value) && control.value !== '0' )) ? {'notNumber': {value: control.value}} : null; + return (control: AbstractControl): { [key: string]: any } => { + return (control.value && (!Number(control.value) && control.value !== '0')) ? { 'notNumber': { value: control.value } } : null; }; } + regexpValidation(): ValidatorFn { + return (control: AbstractControl): { [key: string]: any } => { + if (!control.parent) { + return null; + } + var isRegexSearch = control.parent.get('searchOptions').get('regularExpression').value; + var isValid = true; + try { + new RegExp(control.value); + } catch (e) { + isValid = false; + } + return (isRegexSearch && !isValid) ? { 'notValidRegex': { value: control.value } } : null; + }; + } } diff --git a/src/app/features/yang-search/yang-search.component.html b/src/app/features/yang-search/yang-search.component.html index 984fdb2..55b01d8 100644 --- a/src/app/features/yang-search/yang-search.component.html +++ b/src/app/features/yang-search/yang-search.component.html @@ -3,7 +3,7 @@

YANG Search

-
+
{{ error.message || 'The application has encountered an unknown error.'}} @@ -18,12 +18,12 @@

YANG Search

- +
-

Search Fields

+

Search Fields

diff --git a/src/app/features/yang-search/yang-search.component.ts b/src/app/features/yang-search/yang-search.component.ts index a0c591c..38a1202 100644 --- a/src/app/features/yang-search/yang-search.component.ts +++ b/src/app/features/yang-search/yang-search.component.ts @@ -2,9 +2,11 @@ import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } fr import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { ColDef, GridOptions } from 'ag-grid-community'; +import { ErrorMessage } from 'ng-bootstrap-form-validation'; import { Subject } from 'rxjs'; import { finalize, takeUntil } from 'rxjs/operators'; import { environment } from '../../../environments/environment'; +import { YcValidationsService } from '../../core/yc-validations.service'; import { AppAgGridComponent } from '../../shared/ag-grid/app-ag-grid.component'; import { YangShowNodeModalComponent } from '../yang-show-node/yang-show-node-modal/yang-show-node-modal.component'; import { YangSearchService } from './yang-search.service'; @@ -62,6 +64,12 @@ export class YangSearchComponent implements OnInit, OnDestroy, AfterViewInit { { colId: 'description', field: 'description', headerName: 'Description', maxWidth: 400 }, ]; currentColDefs = []; + customErrorMessages: ErrorMessage[] = [ + { + error: 'notValidRegex', + format: (label, error) => `Regular expression "${error.value}" is not valid` + } + ]; defaultColDef = { autoHeight: true, @@ -81,7 +89,8 @@ export class YangSearchComponent implements OnInit, OnDestroy, AfterViewInit { constructor( private fb: FormBuilder, private dataService: YangSearchService, - private modalService: NgbModal + private modalService: NgbModal, + private ycValidations: YcValidationsService ) { } headerHeightGetter = () => { @@ -131,7 +140,7 @@ export class YangSearchComponent implements OnInit, OnDestroy, AfterViewInit { private initForm() { this.form = this.fb.group({ - searchTerm: ['', Validators.required], + searchTerm: ['', [Validators.required, this.ycValidations.regexpValidation()]], searchOptions: this.fb.group({ caseSensitive: [false], regularExpression: [false], @@ -219,6 +228,10 @@ export class YangSearchComponent implements OnInit, OnDestroy, AfterViewInit { } } + onSearchTypeChange() { + this.form.controls['searchTerm'].updateValueAndValidity(); + } + checkCheckedField(formGroupName: string, myValue: string): boolean { return this.form.get(formGroupName).value.indexOf(myValue) !== -1; } diff --git a/src/app/features/yang-validator/api-overview/api-overview.component.ts b/src/app/features/yang-validator/api-overview/api-overview.component.ts index 5d9181c..9872b3c 100644 --- a/src/app/features/yang-validator/api-overview/api-overview.component.ts +++ b/src/app/features/yang-validator/api-overview/api-overview.component.ts @@ -13,6 +13,7 @@ export class ApiOverviewComponent implements OnInit { constructor() { } ngOnInit(): void { + window.scroll({ top: 0, left: 0, behavior: 'smooth' }); } }