Untitled

import { Component, Host, Input, Optional, SkipSelf } from '@angular/core';
import { ControlContainer, FormControl, NgForm } from '@angular/forms';

@Component({
  selector: 'error-messages',
  templateUrl: './error-messages.component.html',
  styleUrls: ['./error-messages.component.scss'],
})
export class ErrorMessagesComponent {
  @Input() fieldName!: string;

  @Input() set messages(value: Array<[string, string]>) {
    this.errorMessages = new Map([...value]);
  }

  private errorMessages: Map<string, string> | undefined;

  constructor(
    @Optional()
    @Host()
    @SkipSelf()
    private readonly container: ControlContainer,
    @Optional() private readonly form: NgForm
  ) {}

  /**
   * @ignore
   */
  getErrorMessages() {
    const control = this.container?.control?.get(this.fieldName) as FormControl;
    const errorsArray: string[] = [];
    let errorMessage: string;
    const Errors = control.errors;

    this.errorMessages?.forEach((value: string) => {
      errorsArray.push(value);
    });
    Object.keys(control.errors ?? {}).forEach((key) => {
      if (key === 'minlength') {
        errorMessage = `Please Enter Minimum ${Errors?.[key].requiredLength} Characters`;
      } else if (key === 'maxlength') {
        errorMessage = `Exceeded Maximum Limit of ${Errors?.[key].requiredLength} Characters`;
      } else if (key === 'pattern') {
        errorMessage = 'Incorrect Format';
      } else if (key === 'email') {
        errorMessage = 'Invalid Email';
      } else if (key === 'required') {
        errorMessage = 'This Field is Required';
      }
      errorsArray.push(errorMessage);
    });

    return this.shouldDisplayError(control) ? errorsArray : null;
  }

  private shouldDisplayError(control: FormControl) {
    if (control && control.errors) {
      return (this.form && this.form.submitted) || control.touched;
    }
    return false;
  }
}