Breaking News: Grepper is joining You.com. Read the official announcement!

how to display error message in angular 8 for all inputs in a module

Filthy Fly answered on August 9, 2022 Popularity 1/10 Helpfulness 1/10

answer how to display error message in angular 8 for all inputs in a module

how to display error message in angular 8 for all inputs in a module

Comment

import { Component, Input } from '@angular/core';
import { AbstractControl, AbstractControlDirective } from '@angular/forms';

@Component({
    selector: 'error-component',
    templateUrl: 'error.component.html',
    styleUrls: ['error.component.scss']
})

export class ErrorComponent {

    errorMsgList: any = [];

    @Input() controlName: AbstractControl | AbstractControlDirective

    errorMessage = {
        'required'  : (params)  => `This field is required`,
        'maxlength' : (params)  => `Maximum ${params.requiredLength} characters are allowed`,
        'minlength' : (params)  => `Minimum ${params.requiredLength} characters are required`,
        'pattern'   : (params)  => `Invalid format`,
        'min'       : (params)  => `Minimum amount should be ₹ ${params.min}`,
        'whitespace': (params)   => `White spaces are not allowed`
    };


    listErrors() {
        if (!this.controlName) return [];
        if (this.controlName.errors) {
            this.errorMsgList = [];
            Object.keys(this.controlName.errors).map( error => {
                this.controlName.touched || this.controlName.dirty ?
                this.errorMsgList.push(this.errorMessage[error](this.controlName.errors[error])) : '';
            });
            return this.errorMsgList;
        }
        else {
            return [];
        }
    }
}

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: stackoverflow.com

Tags: angular display message module typescript

Link to this answer
Share Copy Link

Contributed on Aug 09 2022

Filthy Fly

0 Answers Avg Quality 2/10

how to display error message in angular 8 for all inputs in a module

Contents

More Related Answers

how to display error message in angular 8 for all inputs in a module

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.