validation feature component added

Author: iyilm4z

angular/src/shared/components/validation/abp-validation.api.ts

@@ -0,0 +1,5 @@
+export interface AbpValidationError {
+  name: string;
+  localizationKey: string;
+  propertyKey: string;
+}

angular/src/shared/components/validation/abp-validation.summary.component.html

@@ -0,0 +1,11 @@
+<ng-container *ngIf="control.invalid && (control.dirty || control.touched)">
+  <ng-container *ngFor="let validationError of validationErrors">
+    <span
+      *ngIf="!!this.control.errors[validationError.name]"
+      class="error invalid-feedback"
+      [class.d-block]="!!this.control.errors[validationError.name]"
+    >
+      {{ getValidationErrorMessage(validationError) }}
+    </span>
+  </ng-container>
+</ng-container>

angular/src/shared/components/validation/abp-validation.summary.component.ts

@@ -0,0 +1,89 @@
+import {
+  Component,
+  Input,
+  Injector,
+  Renderer2,
+  ElementRef,
+  OnInit
+} from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { AppComponentBase } from '@shared/app-component-base';
+import { AbpValidationError } from './abp-validation.api';
+
+@Component({
+  selector: 'abp-validation-summary',
+  templateUrl: './abp-validation.summary.component.html'
+})
+export class ApbValidationSummaryComponent extends AppComponentBase
+  implements OnInit {
+  @Input() control: AbstractControl;
+  @Input() controlEl: ElementRef;
+  @Input() set customValidationErrors(val: AbpValidationError[]) {
+    if (val && val.length > 0) {
+      let defaults = this.defaultValidationErrors.filter(
+        (defaultValidationError) =>
+          !val.find(
+            (customValidationError) =>
+              customValidationError.name === defaultValidationError.name
+          )
+      );
+      this.validationErrors = <AbpValidationError[]>[...defaults, ...val];
+    }
+  }
+
+  defaultValidationErrors: Partial<AbpValidationError>[] = [
+    { name: 'required', localizationKey: 'ThisFieldIsRequired' },
+    {
+      name: 'minlength',
+      localizationKey: 'PleaseEnterAtLeastNCharacter',
+      propertyKey: 'requiredLength',
+    },
+    {
+      name: 'maxlength',
+      localizationKey: 'PleaseEnterNoMoreThanNCharacter',
+      propertyKey: 'requiredLength',
+    },
+    {
+      name: 'email',
+      localizationKey: 'InvalidEmailAddress',
+    },
+    {
+      name: 'pattern',
+      localizationKey: 'InvalidPattern',
+      propertyKey: 'requiredPattern',
+    },
+    {
+      name: 'validateEqual',
+      localizationKey: 'PairsDoNotMatch',
+    },
+  ];
+  validationErrors = <AbpValidationError[]>this.defaultValidationErrors;
+
+  constructor(injector: Injector, public _renderer: Renderer2) {
+    super(injector);
+  }
+
+  ngOnInit() {
+    if (this.controlEl) {
+      this.control.valueChanges.subscribe(() => {
+        if (
+          this.control.valid &&
+          (this.control.dirty || this.control.touched)
+        ) {
+          this._renderer.removeClass(this.controlEl, 'is-invalid');
+        }
+      });
+    }
+  }
+
+  getValidationErrorMessage(error: AbpValidationError): string {
+    if (this.controlEl) {
+      this._renderer.addClass(this.controlEl, 'is-invalid');
+    }
+
+    let propertyValue = this.control.errors[error.name][error.propertyKey];
+    return !!propertyValue
+      ? this.l(error.localizationKey, propertyValue)
+      : this.l(error.localizationKey);
+  }
+}