Question

-4

Handle form errors using components Angular - TypeScript

rated 0 times [ 2] [ 6] / answers: 1 / hits: 41804 / 6 Years ago, tue, april 10, 2018, 12:00:00

I am currently working on a form in Angular/Typescript of several fields (more than 10 fields), and I wanted to manage the errors more properly without duplicating code in my html page.

Here is an example of a form :

<form [formGroup]=myForm>

     <label>Name</label>

     <input type=text formControlName=name>

     <p class=error_message *ngIf=myForm.get('name').invalid && (myForm.submitted || myForm.get('name').dirty)>Please provide name</p>

     <label>Lastname</label>

     <input type=text formControlName=lastname>

     <p class=error_message *ngIf=myForm.get('lastname').invalid && (myForm.submitted || myForm.get('lastname').dirty)>Please provide email</p>

     <label>Email</label>

     <input type=text formControlName=email>

     <p class=error_message *ngIf=myForm.get('email').hasError('required') && (myForm.submitted || myForm.get('email').dirty)>Please provide email</p>

     <p class=error_message *ngIf=myForm.get('email').hasError('email') && (myForm.submitted || myForm.get('email').dirty)>Please provide valid email</p>

</form>

In my case, I have two types of validation for my form :

Html validation : required, maxSize, ... etc.

Back validation : For example, invalid account, size of loaded file, ... etc.

I try to using a directive as mentioned here

<form [formGroup]=myForm>

     <label>Name</label>

     <input type=text formControlName=name>

     <div invalidmessage=name>

        <p *invalidType='required'>Please provide name</p>

     </div>

     <label>Lastname</label>

     <input type=text formControlName=lastname>

     <div invalidmessage=lastname>

        <p *invalidType='required'>Please provide lastname</p>

     </div>

     <label>Email</label>

     <input type=text formControlName=email>

     <div invalidmessage=email>

        <p *invalidType='required'>Please provide email</p>

        <p *invalidType='email'>Please provide valid email</p>

     </div>

</form>

But even with this solution the code is always duplicated and no ability to handle both types of validation.

Do you have another approach ? Is use components appropriate in this case ? If yes, how can do it.

Thank you in advance for your investment.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mariselas

Add To Favorites

Follow

Total Points: 711

Total Questions: 117

Total Answers: 110

Location: Burkina Faso

Member since Thu, Dec 23, 2021

2 Years ago

answered 6 Years ago harleyaleenag · Accepted Answer

You can move the validation errors into a component and pass in the formControl.errors as an input property. That way all the validation messages can be re-used. Here is an example on StackBlitz. The code is using Angular Material but still should be handy even if you aren't.

validation-errors.component.ts

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

import { FormGroup, ValidationErrors } from '@angular/forms';



@Component({

  selector: 'validation-errors',

  templateUrl: './validation-errors.component.html',

  styleUrls: ['./validation-errors.component.css'],

  changeDetection: ChangeDetectionStrategy.OnPush

})

export class ValidationErrorsComponent implements OnInit {

  @Input() errors: ValidationErrors;



  constructor() {}



  ngOnInit() {}



}

validation-errors.component.html

<ng-container *ngIf=errors && errors['required']> Required</ng-container>

<ng-container *ngIf=errors && errors['notUnique']>Already exists</ng-container>

<ng-container *ngIf=errors && errors['email']>Please enter a valid email</ng-container>

For the back validation messages set the error manually on the form control.

const nameControl = this.userForm.get('name');

nameControl.setErrors({

  notUnique: true

});

To use the validation component on the form:

   <form [formGroup]=userForm (ngSubmit)=submit()>

      <mat-form-field>

        <input matInput placeholder=name formControlName=name required>

        <mat-error *ngIf=userForm.get('name').status === 'INVALID'>

          <validation-errors [errors]=userForm.get('name').errors></validation-errors>      

        </mat-error>

      </mat-form-field>

      <mat-form-field>

        <input matInput placeholder=email formControlName=email required>

        <mat-error *ngIf=userForm.get('email').status === 'INVALID'>

          <validation-errors [errors]=userForm.get('email').errors></validation-errors>

        </mat-error>

      </mat-form-field>

      <button mat-raised-button class=mat-raised-button color=accent>SUBMIT</button>

    </form>