Saturday, October 20, 2018

Input validations in a form with Angular 6

Introduction


This article is going to explain how to apply input validations to a form. We have used Angular 6 directive to perform that using Visual Studio Code. Let's see how we can do that with step by step instructions.


Background


Create Angluar application


You can go through the previous blog post to know how to create Front end and back end solution from the beginning Angular 6 - Input restrictions in a form
You can see the sample web page in the browser like this,






















You can see app.component.html file as below, it has a form to get input values, it's going to check for mandatory fields like First name, Last name, Email, SSN and Gender. 
All of these fields have required attribute, angular directive is used to check whether input values are given in correct format with the help of a regular expression.  



























We are going to use directives to apply the validation, so directives are added to app.module component as below. PhoneVaidator, EmailValidator and SSNValidator.





































import {PhoneValidator} from './directives/input-validators/phone-validator.directive'; 
import {EmailValidator} from './directives/input-validators/email-validator.directive'; 
import {SSNValidator} from './directives/input-validators/ssn-validator.directive';

@NgModule({ 
  declarations: [ 
    AppComponent, 
    PhoneValidator,
    EmailValidator, 
    SSNValidator 
], 
imports: [ 
   BrowserModule, 
   FormsModule, 
   NgSelectModule, 
   HttpClientModule 
], 
providers: [], 
bootstrap: [AppComponent] 
})

You can see the directive to apply email validation as follows, It's going to use a regular expression to parse the input text in the email field.







































//validate email 
import { NG_VALIDATORS, FormControl, ValidatorFn, Validator } from '@angular/forms'; 
import { Directive } from '@angular/core'; 

@Directive({ 
  selector: '[emailvalidator][ngModel]', 
  providers: [ 
    { 
      provide: NG_VALIDATORS, 
      useExisting: EmailValidator, 
      multi: true 
    } 
 ] 
}) 

export class EmailValidator implements Validator { 
  
  validator: ValidatorFn; 

  constructor() { 
    this.validator = this.emailValidator(); 
  } 

  validate(c: FormControl) { 
    return this.validator(c); 
  } 

  emailValidator(): ValidatorFn { 
     return (c: FormControl) => { 
       if(c.value == "") { 
          return null; 
       } 
       let isValid = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/                      .test(c.value); //email 
       if (isValid) { 
          return null; 
       } else { 
          return { 
             emailvalidator: { 
                valid: false 
               } 
              }; 
            } 
          } 
        } 
      }

We can validate Phone no field using this regular expression, It allows to enter phone no in +11111111111 format.




















































//validate phone no 
import { NG_VALIDATORS, FormControl, ValidatorFn, Validator } from '@angular/forms'; 
import { Directive } from '@angular/core'; 

@Directive({ 
   selector: '[phonevalidator][ngModel]', 
   providers: [ 
      { 
         provide: NG_VALIDATORS, 
         useExisting: PhoneValidator, 
         multi: true 
       } 
 ] 
}) 

export class PhoneValidator implements Validator { 
   validator: ValidatorFn; 
  
   constructor() { 
      this.validator = this.phoneValidator(); 
    } 

   validate(c: FormControl) { 
      return this.validator(c); 
   } 
   
   phoneValidator(): ValidatorFn { 
      return (c: FormControl) => { 
         if(c.value == "") { 
            return null; 
          } 
      
      let isValid = /^\+[0-9]{11}$/.test(c.value); 
      if (isValid) { 
         return null; 
      } else { 
         return { 
            phonevalidator: { 
               valid: false 
            } 
          }; 
        } 
      } 
    } 
  }

We want to validate SSN field in Norway, so have to install npm package to validate ssn field as below,

npm install --save norwegian-national-id-validator

You can find the following directive has used installed npm package to validate norwegian ssn no































































//validate ssn 
import { NG_VALIDATORS, FormControl, ValidatorFn, Validator } from '@angular/forms'; 
import { Directive } from '@angular/core'; 
import { validateNorwegianIdNumber } from 'norwegian-national-id-validator'; 

@Directive({ 
   selector: '[ssnvalidator][ngModel]', 
   providers: [ 
      { 
         provide: NG_VALIDATORS, 
         useExisting: SSNValidator, 
         multi: true 
      } 
   ] 
}) 

export class SSNValidator implements Validator { 
   validator: ValidatorFn; 

   constructor() { 
      this.validator = this.ssnValidator(); 
   } 

   validate(c: FormControl) { 
      return this.validator(c); 
   } 

   ssnValidator(): ValidatorFn { 
      return (c: FormControl) => { 
         if(c.value == "") { 
            return null; 
         } 
      
         let isValid = /^[0-9]{6}( )[0-9]{5}$/g.test(c.value); 
         if (isValid) { 
            var format = validateNorwegianIdNumber(c.value.replace(/ /g,'')); 
            if(format){ 
               return null; 
            } 
            else{ 
               return { 
                  ssnvalidator: { 
                     valid: false 
                  } 
                }; 
              } 
            } else { 
                return { 
                   ssnvalidator: { 
                      valid: false 
                    } 
                  }; 
                } 
              } 
           } 
         }

You can see package.json file like this after installing npm package to validate ssn field























When you run the application, you can see Create Student form as below, Save button is disabled since the form is not dirty yet.




















When you hit on the Save button after entering some values, You can see all the required field error messages as follows, It shows SSN and Email fields as invalid as well.
It doesn't show Phone as invalid since we haven't added any value to it and Phone is not a mandatory field.






















You can see Gender dropdown field has turned into red border as above, we have to add some styling to achieve that.














.invalid-feedback-select { width: 100%; font-size: 80%; color: #dc3545; }

We have to add style file in angular.json file












"styles": [ 
   "./node_modules/bootstrap/dist/css/bootstrap.min.css", 
   "src/styles.css", 
   "src/assets/css/common.scss" 
 ], 

Let's input data to required fields and check what happens, still shows invalid fields as below for phone no, email and ssn























After entering correct values for Phone, Email and SSN form look like this.























Download


TechNet Gallery


You can download the sample code from here, ng-input-validations

GitHub


You can clone this repo from GitHub, ng-input-validations


Conclusion


In this article, it describes how to apply input validations to form controls using Angular 6. The sample code has used .NET Core Web API project to develop the service layer. We used Angular 6 directives to achieve this.


References

1 comment: