DEV Community: Ajay Ojha

Unique value validation in FormArray of Angular

Ajay Ojha — Wed, 20 Mar 2019 01:21:35 +0000

cross posted to medium.com

Here, we discuss the approach of unique value validation on FormControl inside the FormArray.

we build a Job Application Form, where the user can enter about his name and skills. Skills must be unique.

Let’s start to create a form and apply a unique validation on skill name. As such, there is no unique validator available in angular and without writing too much code in the component, straightaway I will use unique validator of @rxweb/reactive-form-validators validation framework. This validation framework provides more than 50+ validators with cross-field validation.

Let’s install first @rxweb/reactive-form-validators.

npm install @rxweb/reactive-form-validators

Now, Register the ‘RxReactiveFormsModule’ in the root module.



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import {  RxReactiveFormsModule } from "@rxweb/reactive-form-validators"
@NgModule({
  imports:      [ BrowserModule, FormsModule,ReactiveFormsModule,RxReactiveFormsModule ],
  declarations: [AppComponent],
  bootstrap:    [ AppComponent]
})
export class AppModule { }

Now, we have to create the job application FormGroup including nested FormArray. Before creating job application FormGroup, let’s create skill FormGroup and apply the unique validator on skillName FormControl. Later, Skill FormGroup will be pushed in skills FormArray.



    getSkillFormGroup(){
      return this.formBuilder.group({
        skillName:['',RxwebValidators.unique()]
      })
    }

Now, let’s create main job application FormGroup and inside this FormGroup, I will call previously created method ‘getSkillFormGroup’ to pushed the FormGroup in skills FormArray.



        this.jobFormGroup = this.formBuilder.group({
            fullName:[''], 
            skills:this.formBuilder.array([
              this.getSkillFormGroup()
            ])

        });

As the nature of the job application form user will add more than one skill. To achieve this, we have to create ‘addSkill’ method and pushed the new FormGroup of skill in Skills FormArray.



    addSkill(){
      let skillsArray = <FormArray>this.jobFormGroup.controls.skills;
      skillsArray.push(this.getSkillFormGroup());
    }

Let’s wrap all of the code in the one component.



import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,FormArray } from "@angular/forms"
import { RxwebValidators } from '@rxweb/reactive-form-validators';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
 jobFormGroup: FormGroup

    constructor(
        private formBuilder: FormBuilder )
    { }

    ngOnInit() {
        this.jobFormGroup = this.formBuilder.group({
            fullName:[''], 
            skills:this.formBuilder.array([
              this.getSkillFormGroup()
            ])

        });
    }

    addSkill(){
      let skillsArray = <FormArray>this.jobFormGroup.controls.skills;
      skillsArray.push(this.getSkillFormGroup());
    }

    getSkillFormGroup(){
      return this.formBuilder.group({
        skillName:['',RxwebValidators.unique()]
      })
    }
}

Binds the HTML as per angular practices.

That’s it…

Here is the image of the working example of unique validation in FormArray.

Please refer the working example on stackblitz

I hope you have enjoyed this post, if you have any questions or suggestions then please post the comment below.

File validation in Angular Reactive Form

Ajay Ojha — Wed, 20 Mar 2019 00:28:58 +0000

File validation is a little bit clumsy task to do in the angular reactive forms. Here we discuss how we can optimize the code and achieve our goal to validate the file before passing to the server.

Let's understand the functional requirement:

The form should accept only jpeg and gif files and the files resolution is around 100 by 100 pixel.
The File object should be stored as a value in the FormControl.

Let's dive into the code to fulfill the requirement. We use extension and file validator of RxwebValidator.

As RxwebValidator is not the part of Angular framework, So we have to install the @rxweb/reactive-form-validators package to avail the services of RxwebValidator.

npm install @rxweb/reactive-form-validators

Now, we have to register the 'RxReactiveFormsModule' in the root module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import {  RxReactiveFormsModule } from "@rxweb/reactive-form-validators"
@NgModule({
  imports:      [ BrowserModule, FormsModule,ReactiveFormsModule,RxReactiveFormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Let's create a profilePhoto FormControl and set the image and extension validator on that.

        this.userInfoFormGroup = this.formBuilder.group({
            profilePhoto:['', [ 
                                 RxwebValidators.image({maxHeight:100,maxWidth:100 }),
                                 RxwebValidators.extension({extensions:["jpeg","gif"]})
                                 ]       
                            ], 
        });

As per the above code we have used image validator to restrict user to upload the image upto 100 pixel of height and width and the allowed extensions are "jpeg" and "gif".

Here, is the complete code of the component:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms"
import { RxwebValidators } from '@rxweb/reactive-form-validators';

@Component({
    selector: 'app-image-add-validator',
    templateUrl: './image-add.component.html'
})
export class ImageAddValidatorComponent implements OnInit {
    userInfoFormGroup: FormGroup

    constructor(
        private formBuilder: FormBuilder )
    { }

    ngOnInit() {
        this.userInfoFormGroup = this.formBuilder.group({
            profilePhoto:['', [ 
                                 RxwebValidators.image({maxHeight:100,maxWidth:100 }),
                                 RxwebValidators.extension({extensions:["jpeg","gif"]})
                                 ]       
                            ], 
        });
    }
}

As we also want to file object should be stored as a value in the FormControl.
For that, we have to write the attribute([writeFile]="true") on the input file control.
See the HTML code below:

<div>
  <form  [formGroup]="userInfoFormGroup">
    <div class="form-group">
      <label>Profile Photo</label>
      <input [writeFile]="true" type="file" formControlName="profilePhoto" class="form-control"  />
    </div>

    <button [disabled]="!userInfoFormGroup.valid" class="btn btn-primary">Submit</button>
  </form>
</div>

All Done!.

Please refer to the stackblitz example.

As we have discussed on the file validation, then one scenario coming into every application which is mentioned below:

How to restrict the user up to certain files?

In this case, you have to use file validator and specify the minimum or/and maximum files.
Here is the code of file validator.

        this.userInfoFormGroup = this.formBuilder.group({
            files:['', RxwebValidators.file({minFiles:2, maxFiles:5 })], 
        });

Please refer the working example of file validator.

If you have any question/suggestion, Please share your comments below.

Decimal Number validation and apply the Currency Format in Angular

Ajay Ojha — Sun, 17 Mar 2019 19:17:17 +0000

We discuss how we can validate the decimal number and also format the number as per the locale of the application.

We usually create a custom validator for numeric validation and the custom directive to format the number(120,875,256.25).

But here, we do not create any custom validator/directive to fulfill the need.

We use RxwebValidators to validate the decimal value as well as format the number.
RxwebValidator is available through @rxweb/reactive-form-validators package, this provides a lot of validators to fulfill the application needs, But we only discuss the numeric validator.

We have to install the package of @rxweb/reactive-form-validators to avail the services of RxwebValidators.

npm install @rxweb/reactive-form-validators

Once it's installed, we have to register the 'RxReactiveFormsModule' in the root module.

Let's do that.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import {  RxReactiveFormsModule } from "@rxweb/reactive-form-validators"
@NgModule({
  imports:      [ BrowserModule, FormsModule,ReactiveFormsModule,RxReactiveFormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Now, We have to create the FormGroup as per the standard approach and we apply the numeric validator on the amount FormControl.

        this.userInfoFormGroup = this.formBuilder.group({
            amount:['', RxwebValidators.numeric()], 
        });

As per the above code, we have applied the numeric validator on the amount FormControl. This will validate the numeric value, if someone enters the value other than numeric then the FormControl will be invalid.

But wait, our need is to validate the decimal value as well and format the number. For that, we have to pass two parameters in the numeric validator.

        this.userInfoFormGroup = this.formBuilder.group({
            amount:['', RxwebValidators.numeric({allowDecimal:true,isFormat:true})], 
        });

allowDecimal property allows to user to enter the decimal value as well and isFormat is for format the numeric value as per the application locale. The format will be applied once the user moves to the another control.

Here is the complete code of the component.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms"
import { RxwebValidators } from '@rxweb/reactive-form-validators';

@Component({
    selector: 'app-numeric-add-validator',
    templateUrl: './numeric-add.component.html'
})
export class NumericAddValidatorComponent implements OnInit {
    userInfoFormGroup: FormGroup

    constructor(
        private formBuilder: FormBuilder )
    { }

    ngOnInit() {
        this.userInfoFormGroup = this.formBuilder.group({
            amount:['', RxwebValidators.numeric({allowDecimal:true,isFormat:true})], 
        });
    }
}

All Done!.

You can refer to the stackblitz example of the numeric validator.

Binds the HTML as per the standard practice of angular reactive forms.

If you have any question/suggestion, Please share your comments below.

Compare Password in Angular with RxwebValidator

Ajay Ojha — Sat, 16 Mar 2019 00:29:37 +0000

Here, we discuss the approach of how to compare the password with the RxwebValidators.

Why RxwebValidator?

Comparing the password is possible with the standard approach as well. Because angular provides a feature to manage the cross-field validation. But I see some design issue with the standard approach of Angular. If I refer to the angular doc on cross-field validation. The Angular doc suggests that the custom validator I have to put on FormGroup level for comparing two fields or some other actions. This approach is less appropriate for large/complex forms. Because that custom validator makes a call every FormControl value changes, blur, etc events.

Let's see the below screenshot, The custom validator is calling non-validation field as well, The code I have copied from Angular Doc.

As per the above screenshot, I am entering the value in the 'power' FormControl and this FormControl isn't have relation with validation in the Form. But still, the custom validator is calling while entering the value in this FormControl.

Now, we talk about RxwebValidator to overcome this problem.

First of all, we have to install the package @rxweb/reactive-form-validators

npm install @rxweb/reactive-form-validators

Once it's installed, we have to register the 'RxReactiveFormsModule' in the root module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import {  RxReactiveFormsModule } from "@rxweb/reactive-form-validators"
@NgModule({
  imports:      [ BrowserModule, FormsModule,ReactiveFormsModule,RxReactiveFormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Now let's create two FormControls inside the FormGroup and use the compare validator of RxwebValidator. The two FormControls are 'password' and 'confirmPassword'.

The functional requirement is if I change the value any one of the FormControl, the validation should fire.

We apply the compare validator on 'confirmPassword' FormControl.

this.userForm = this.formBuilder.group({
  'password': '',
  'confirmPassword':['',RxwebValidators.compare({fieldName:'password'})]
  });

As we have provided the fieldName of 'password' FormControl in the compare validator to compare the value with the 'password' FormControl.

See the action below:

You can refer to the stackblitz example of compare password.

All done!.

If you have any question/suggestion, Please share your comments below.

New Way to Validate the Angular Reactive Form

Ajay Ojha — Fri, 15 Mar 2019 00:06:56 +0000

cross posted to medium.com

Here, We will discuss model object based reactive form validation, which overcomes the current challenges of angular reactive forms.

High-Level Challenges?

When you are working on a more data-oriented advanced reactive form, you’ll notice that you are validating much more than just your inputs, some of the validators and few common things are not easily available in the angular framework. Then you design the custom validation and subscribe to the value change of FormControl to achieve the functional needs of your application. This introduces additional noise in the code to do the same thing again and again in most of the cases.

Some of the current reactive form validation challenges are jotted down.

As such, there is no plain model object where we can define properties based upon respective data types and directly map it with reactive form.
We can’t map the model object value directly with validations to the reactive form while creating a FormGroup. *Manually configure the validators on every respective property(FormControl).
If there is a specific need to perform some other operation based on respective FormControl value change then we have to subscribe to the respective value change of FormControl and do the further activity, which is a bit difficult to manage in large forms.
Writing too much code to manage cross-field validation and conditional validation, if there are more than one validator on respective FormControl.

To work on the new approach and overcome the current challenges, We will use @rxweb/reactive-form-validators for angular reactive form.

Why @rxweb/reactive-form-validators?

If I am talking about typescript, the typescript programming language highly relies on Object-Oriented Programming practices, which makes more power to write clean code. This is the main reason to design this framework to provide a model object based reactive form. Because this gives you more flexibility when the complexity of application form increase and application grows at that time you don’t bog down the cumbersome activity of assembling the validators and other value subscriptions.

Now, Let’s create the Model Object-Based Reactive Form with Decorator based validation.

What is decorator based validation?

Let’s say, you want few validations on userName field like alpha, minLength and required. Then you can set those validations in the form of validation decorator on the userName property of your User model. The @rxweb/reactive-form-validators will add all configured validation decorators while creating a FormControl of the userName property. The code example as below:

export class User {
    @alpha()
    @minLength({ value: 5 })
    @required()
    userName: string;
}

Functional Requirement

Meet Mike, Mike is working on social media application and wants to build the user registration form. Registration form mockup, functional need, validation rules are as below:

Mockup of the user registration form.

All red marked fields are required.
Confirm field only valid when password and confirm field values are same.
The fullName property is read-only and it’s the combined value of firstName and lastName, Whenever the user enters the value in respective FormControl then fullName updated value will reflect immediately on UI.

Now, Mike starts to build the model object-based reactive form.

Before developing the form Mike installs the package of @rxweb/reactive-form-validators. Package installation command as below:

npm install @rxweb/reactive-form-validators

Once the package is installed, Mike registers the ‘RxReactiveFormsModule’ in the root module to avail the services of this framework.
Here is the below code example:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import {  RxReactiveFormsModule } from "@rxweb/reactive-form-validators"
@NgModule({
  imports:      [ BrowserModule, FormsModule,ReactiveFormsModule,RxReactiveFormsModule ],
  declarations: [AppComponent],
  bootstrap:    [ AppComponent]
})
export class AppModule { }

Once the ‘RxReactiveFormsModule’ is registered, Mike creates a User model with respective properties as shown in the mockup and also applies validation decorators on the properties as per the registration form need.

export class User {
    @required()
    firstName: string;

    @required()
    lastName: string;

    @required()
    userName: string;

    @required()
    password: string;
}

As per the above code, Mike has applied the required validation decorator on respective fields but missed the scenario of second and third.

Now let’s see, how to achieve the second and third scenario.

As per the second scenario is to compare the value of two controls, to fulfill the need. Mike is using compare decorator which compares the cross field FormControl value.
The only property of confirmPassword and applied validation decorator as below:

@compare({fieldName:'password'})
confirmPassword:string;

Now to achieve the third scenario, Mike will not subscribe the ValueChanges property and set the value in the fullName field when the value will change in firstName or lastName. Mike does some corrections in already defined firstName and lastName property. Mike uses getter/setter typescript feature on firstName and lastName. See below are the changes:

    private _firstName: string = '';
    private _lastName: string = '';

    fullName: string;

    @required()
    set firstName(value: string) {
        this._firstName = value;
        this.setFullName();
    }

    get firstName(): string {
        return this._firstName;
    }

    @required()
    set lastName(value: string) {
        this._lastName = value;
        this.setFullName();
    }

    get lastName(): string{
       return this._lastName;
    }

    setFullName() {
        this.fullName = `${this.firstName} ${this.lastName}`;
    }

As Mike has applied the getter/setter on firstName and lastName property and created a method of setFullName for updating the value fullName. Now one question arises:

Why Mike has used getter/setter property?

Whenever the user enters a value in the firstName or lastName FormControl at that time firstName and lastName property setter function will call with the latest value. Inside the setter function, Mike has set the value in private property of the respective public property. This gives better flexibility in the application as the same model will use in multiple components. Mike doesn’t need to write the same code in multiple components and also doesn’t need to subscribe to the ValueChanges. See the below image :

Now let’s see, the complete User model.

import { required,compare } from "@rxweb/reactive-form-validators";

export class User {
    private _firstName: string = '';
    private _lastName: string = '';

    fullName: string;

    @required()
    set firstName(value: string) {
        this._firstName = value;
        this.setFullName();
    }

    get firstName(): string {
        return this._firstName;
    }

    @required()
    set lastName(value: string) {
        this._lastName = value;
        this.setFullName();
    }

    get lastName(): string{
       return this._lastName;
    }

    @required()
    userName: string;

    @required()
    password: string;

    @compare({fieldName:'password'})
    confirmPassword:string;

    private setFullName() {
        this.fullName = `${this.firstName} ${this.lastName}`;
    }
}

Now, Mike creates a FormGroup from User model object in the component. Mike uses the ‘formGroup’ method of RxFormBuilder for creating a FormGroup.
Here is the code :

import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms"

import { RxFormBuilder } from '@rxweb/reactive-form-validators';

import { User } from '../user.model';

@Component({
    selector: 'app-user-add',
    templateUrl: './user-add.component.html'
})
export class UserAddComponent implements OnInit {

    userFormGroup: FormGroup
    user:User;
    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
        this.user = new User();
        this.userFormGroup = this.formBuilder.formGroup(this.user);
    }
}

Now, Mike writes the HTML as per angular reactive form standards. But the fullName property is not a FormControl. Mike has used user object for showing fullName value. See the below code:

<div class="form-group">
    <label>Full Name : {{user.fullName}}</label>
</div>

Here is the complete HTML code:

<h1 class="bd-title" id="content">Model Object based reactive form</h1>
<br/>
<form *ngIf="userFormGroup" [formGroup]="userFormGroup">

<div class="form-group">
    <input type="text" formControlName="firstName" placeholder="First Name" class="form-control"  />

</div>
<div class="form-group">
    <input placeholder="Last Name" type="text" formControlName="lastName" class="form-control"  />

</div>
<div class="form-group">
    <input placeholder="UserName" type="text" formControlName="userName" class="form-control"  />

</div>
<div class="form-group">
    <input placeholder="Password" type="text" formControlName="password" class="form-control"  />

</div>
<div class="form-group">
    <input placeholder="Confirm" type="text" formControlName="confirmPassword" class="form-control"  />

</div>
  <div class="form-group">
    <label>Full Name : {{user.fullName}}</label>
  </div>
<button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
</form>

Please checkout the complete working example code on stackblitz

One question may arise in your mind, Why fullName FormControl is not created. As this is also public property as like other properties (firstName, lastName, etc…). I will give this answer in my next article with more details.

If you like this approach then some other question also arise, like:

How nested FormGroup will create?
How nested FormArray will create?
How to update the value of particular FormControl with this approach?
How can I set my custom validation with this approach?
n….nnn…..nnn number of questions?

All can be possible with model object reactive form validation. I will share some highlights in my next coming articles.

Hope you like the new validation approach in a reactive form. If you have any suggestion on this approach, please write your comment below.