CODEWITHSUNDEEP
angularangular-ng-ifangular-validation
vinit tyagi
vinit tyagi

Reputation: 973

Best way to show error messages for angular reactive forms, one formcontrol multiple validation errors?

I am showing reactive form error messages as per the suggested approach of angular angular form validation error example.

html code of showing error on the page:

<div [formGroup]="myForm">
  <div>
<input type="text" formControlName="firstName"/>
<div *ngIf="myForm.controls.firstName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.firstName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.firstName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  <div>
<input type="text" formControlName="lastName"/>
<div *ngIf="myForm.controls.lastName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.lastName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.lastName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  </div>

Just for the reference of my component code below :

this.myForm = this.formBuilder.group({
      firstName:['',[Validators.required,Validators.maxLength(50)]],
      lastName:['',[Validators.required,Validators.maxLength(50)]]
    })

If you see the above code, I have applied two validation on my firstName and lastName field.

For showing error message, I have written multiple *ngIf condition to show the error message.

Is there any best way to show the validation message of particular control without writing multiple *ngIf condition ?, because the same code I am writing again and again with different control name and validator name for showing error message.

Upvotes: 20

Views: 58138

Answers (6)

Jason B
Jason B

Reputation: 156

I've been working on an enterprise application that is primary form driven and ran into the same challenge. The best solution I could determine was wrapping all of my input controls in components. Then handling the validation display within the component. This allows consistent validation display without repeating the code multiple times in each form.

field-input-text.component.html

<input [formControl]="formControlItem" [maxlength]="maxlength" [placeholder]="placeholder" #input>
<span *ngIf="formControlItem.invalid && (formControlItem.dirty || formControlItem.touched)" class="text-danger">
    <span *ngIf="formControlItem.errors.required">This field is required</span>
    <span *ngIf="formControlItem.errors.minlength">This field is too short</span>
    <span *ngIf="formControlItem.errors.maxlength">This field is too long</span>
    <span *ngIf="formControlItem.errors.pattern">Invalid value for this field</span>
</span>

field-input-text-component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
    
@Component({
  selector: 'app-field-input-text',
  templateUrl: './field-input-text.component.html'
})
export class FieldInputTextComponent implements OnInit, AfterViewInit {
  @Input() formControlItem: FormControl;
  @Input() maxlength: number;
  @Input() placeholder: string = '';
      
  constructor() { }
    
  ngOnInit() {
  }
}

Usage

<app-field-input-text [formControlItem]="form.controls.username" maxlength="10"></app-field-input-text>

In the usage, you can see the space it saves without needing the extra validation lines. You can also reformat all of the validation in one place instead of touching every area.

The main disadvantage is not being able to use the formControl or formControlName attributes. I tried creating a custom ControlValueAccessor component but that did not help with the validation display.

I found your question searching to see if anyone else have found a better way. I know this answer is a little late but hopefully it helps.

Upvotes: 7

frIT
frIT

Reputation: 3305

Another way to do this is using a *ngFor directive. However, there some problems with this method that need to be provided for:

  1. ValidationErrors is an associative array (an object with 1 or more keys, each associated with some error value) while *ngFor requires an iterable array.
  2. The *ngFor causes a lot of reloads, so the error messages are constantly re-rendered.
  3. You have to choose on some scheme how the error messages look like that your validators ALL conform to, because your message is not hardcoded any more in the HTML template, but are passed in in the various ValidationErrors objects.

Some strategies to solve the above (adapt according to the specifics on your project):

  1. I use a utility method (perhaps a static in a utility class) to convert the ValidationErrors object to an array of entries (like [ { key: msg } ]).
  2. The re-rendering is solved by providing a custom "trackBy" function to the trackBy: property in the *ngFor. Maybe another static in the same utility class.
  3. The easiest is to use a TranslatePipe and have translations for each validator error key. (You could use the associated error data as string interpolation parameters, if set up as an object with key:value pairs.) Another way would be to use the error data associated with the error key to store the final string in it, or a translation pipe key. Or some variation of these, but this will influence how your error message tag looks like. In the example below I chose to use each error key as a translation key, and the error data as an interpolation object.

Putting this into code:

Utility class:

import ...

export class MyValidatorUtil {
  ...

  public static getErrors(control: AbstractControl | null): ValidationErrors[] {
    return Object.entries(control?.errors ?? {})
             .map(([key, msg]: [string, any]) => ({ key, msg }));
  }

  public static errorTrack(index: number, err: ValidationErrors): string {
    return err['key'] ?? '';
  }
  ...
}

HTML Template:

<input type="text" formControlName="myInput" .../>
<div class="alert"
     *ngFor="let err of MyValidatorUtil.getErrors(myFormGrp.get('myInput')); trackBy:MyValidatorUtil.errorTrack">
  {{err['key']}} | translate : {{err['msg']}}
</div>

You will need to put a property in your component's TypeScript to be able to use the static functions in your template:

imports ...

export class MyForm {
  public MyValidatorUtil = MyValidatorUtil; // <-- like this
  public myFormGrp: FormGroup ...

Upvotes: 1

P&#233;ter
P&#233;ter

Reputation: 322

Maybe try this awesome package: https://www.npmjs.com/package/ngx-form-validations

This package has a common dictionary for error message depends on error type. Its installation is not complicated at all.

It can manage your whole form, not just a control. If you need some extra expansion feel free to contact me on GitHub.

Furthermore: There is a demo page where you can easily check its operation and there is a demo project too. Contact details can be found in the package.

Upvotes: 0

Vinay Somawat
Vinay Somawat

Reputation: 677

A better way to handle all the error, Create a separate component error-component

error.component.ts

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 [];
        }
    }
}

error.component.html

<small class="error-block" *ngFor="let errorMessage of listErrors(); let last=last;">
    {{last ? errorMessage: ''}}
</small>

Usages

<input 
   [type] ="inputObj.mobileNumber.type" 
   id="id1" name="custMobNumber" 
   [(ngModel)]="inputObj.mobileNumber.value" 
   [required]="inputObj.mobileNumber.required" 
   [minlength]="inputObj.mobileNumber.minLength" 
   [maxlength]="inputObj.mobileNumber.maxLength" 
   [pattern]="inputObj.mobileNumber.pattern" 
   class="textbox font-15 full-width">
   <error-component [controlName]="collectionForm.controls['custMobNumber']">
    </error-component>

Upvotes: 10

Sunil
Sunil

Reputation: 11241

I would suggest to have a component called print-error which can handle any kind of OOTB or Custom errors.

You can handle as many as errors you want.

print-error.component.ts

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

@Component({
    selector: 'print-error',
    templateUrl: './print-error.component.html',
    providers: []
})
export class PrintError {

    @Input("control")
    control: any;

}

print-error.component.html

<div class="text-danger" *ngIf="control && control.errors && (control.dirty || control.touched)">
     <div *ngIf="control.errors.required"><small>This field is required</small></div>
     <div *ngIf="control.errors.unique"><small>{{control.errors.unique}}</small></div>
     <div *ngIf="control.errors.lessThen"><small>{{control.errors.lessThen}}</small></div>
     <div *ngIf="control.errors.greaterThan"><small>{{control.errors.greaterThan}}</small></div>
     <div *ngIf="control.errors.email"><small>{{control.errors.email}}</small></div>
     <div *ngIf="control.errors.mobile"><small>{{control.errors.mobile}}</small></div>
     <div *ngIf="control.errors.confirmPassword"><small>{{control.errors.confirmPassword}}</small></div>
</div>

Usages

 <label for="folder-name">Email</label>
 <input name="email" required   emailValidator #email="ngModel" [(ngModel)]="user.email">
 <print-error [control]="email"></print-error>

Upvotes: 32

Kevin McCann
Kevin McCann

Reputation: 551

If it's a small form I usually just use lots of *ngIf; however, a custom validator directive as mentioned above might be useful if your application is almost entirely forms in need of validation.

Take a look at the source, to see how the built-in validators are set up. https://github.com/angular/angular/blob/2.0.0-rc.3/modules/%40angular/common/src/forms-deprecated/directives/validators.ts#L104-L124

Here's an example I dug up, but I think it's a little overkill for most use cases. Just write an *ngIf line in the template HTML, instead of a whole new @Attribute...

https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2

Upvotes: 0

Related Questions