Forem: Ushmi Dave

6 key Points to check while selecting best open source framework in Application

Ushmi Dave — Wed, 27 Oct 2021 13:21:11 +0000

Single page web applications built with the help of various front-end frameworks like angular, react and Vuejs have a large number of third party open source frameworks which can give great support towards achieving a lot of large functionalities and modules including user-interface, tables and grids, forms and validations, translations and a lot more..
This article consists of a list of some of the important points to be kept in mind while choosing the best framework to opt for your application.
Before moving on to describe the points, I would like to highlight some of the major drawbacks and limitations which would arrive if you fail to analyse and choose an appropriate framework resulting to loss of support, risk to failures, unresolved issues etc..

The Development Approach

The development approach refers to the model adopted by the owner, people and contributors. To look at the pattern and history of the contributors on how did they work on it or why have they designed this approach for the framework. For tech geeks it is easy to identify it as for open source repositories it is very easy to look into branches, codes and commits.

Maintenance and Support

Every framework should actively provide support towards the community through a proper ecosystem. A library must have actively respond towards the issues and feature requests of the users. To Trace this you must check the active and closed issues on the repository and along with that the ecosystems which are provided by the team such as gitter, slack etc…

Compatibility and Versioning

To check the versioning and compatibility of the framework can be checked by checking the change log of the repository and the release notes which can be found after every new release has been done on the repository.

Documentation

Choose a framework that is easy to adopt and which has an intuitive way to describe how to get done and what steps to be taken in case of issues and problems.
A well documented framework is itself a green tick to easily integrate it into the application.

License

Open source libraries contain detailed license MIT which describes the terms and conditions for the contribution of the ongoing development also the contributions and integrations of the used libraries into the package, This is a very mandatory and not to be missed step.
Search for the repository on npm and check under the license section.

Popularity

A well developed, documented, Intuitive and good maintained framework is loved by millions across the globe. A very popular framework has a large number of downloads on multiple platforms where it can be downloaded. For example : Npm, yarn

Apart from the downloads there are three major points to check on npm : Popularity, Quality and Maintenance(PQM)

Conclusion:

This article is made in reference to the package @ng-bootstrap/ng-bootstrap which is an open source framework used in angular which falls under MIT license.
This content is designed to help the developers which some of the major aspects to analyze while choosing the best integral package/library for their application.

Introducing @rxweb/angular-router : Handle Angular Routing Better 🚀

Ushmi Dave — Thu, 21 Jan 2021 13:05:47 +0000

The Current Scenario

Angular router being able to build SPA applications supporting multiple route provides goodness of using a single HTML with all the functionalities all over the application and rendering the UI based upon the route.

Additionally configure route guards for granting and removing the access, which is pretty cool.

Another aspects to be taken care of while developing an application with high end security are authentication and authorization such that they are performed separately that too in a concentrated way.

A single guard to manage access and a pre-route action handler to manage the data of the application, How is these managed in an angular application and what are the high level challenges faced ?????

What is not present ?

1) Central Orientation to handle authorization and authentication pre-route with separation of concerns.
2) Globally Resolve User before Component initialization.
3) Globally Manage Access based upon the user role.

4) Single CanActivate for all the routes to handle complex business rules separately.
5) Global and component level Middlewares.

Why @rxweb/angular-router ?

A decorator @routerModule which is declared in the root module with the role to handle authentication, authorization and middlewares throughout the application with are managed individually.
A single CanActivate guard to handle all the routes.
Component wise access check using @access decorator.
Centralized URL encryption.

with @rxweb/angular-router

What is @rxweb/angular-router ?

It is a package to manage routes in an angular application along with authorization, authentication in an intuitive and segregated way.

It comes with Simplification of actions to be done whenever the user redirects to the route and the data is rendered, which increases the Maintainability of the router module in our angular application and helps to avoid using multiple guards while makes the application consistent.

The Usage

Installation :

npm install @rxweb/angular-router

Add the following in the import statement in the app.module.ts

import { RxRoutingModule } from '@rxweb/angular-router';

As we discussed we will see how to globally use authorization, authentication and middlewares using a single decorator @routerModule.

The @routerModule is declared in the app.module.ts as below

@routerModule({
    authentication:,
    authorization :,
    middlewares : [] 
  })
@NgModule({...})
export class AppModule { }

We will add values to their respective properties by the tutorial listed down as below :

The same way we will add authorization and middlewares added globally as well on the component level in the next parts

For implementing Authorization, refer to Simplified way to perform Authentication in Angular Routing

Conclusion

In this article we learnt about @rxweb/angular-router and its benefits and the tutorial parts of the implementation in @routerModule, along with the global implementation it also contains directive based authorization, component based middlewares and access level.

Simplified Way to Perform Authentication in Angular Routing

Ushmi Dave — Thu, 21 Jan 2021 13:05:15 +0000

In this article we discuss a intuitive way to implemenent Authentication in angular application using @rxweb/angular-router

@rxweb/angular-router is a single package to manage routes, middlewares, access, authenticity and Url encryption in a segregated way

The Setup

To install and setup @rxweb/angular-router in the application install the package and declare RxRoutingModule in import section of the root module. For in detail information of the base and the setup, refer to Introducing @rxweb/angular-router : Handle Angular Routing Better

Global Level Authentication

@rxweb/angular-router provides global level authentication and using the @routerModule decorator.

The authentication parameter will be provided a global AuthResolver class which will resolve the user object whenever the user will log in after that the user object will be available to the component whenever the route navigation takes place even if the page is refreshed, There is no need to store this in local storage which provides better security.

Lets begin by adding the authentication parameter, Start by creating a class named AuthResolver which will resolve the user object by making a request to server further it will provide the user object to the component whenever the navigation takes place.

The resolveAuth will resolve the auth object depending upon your custom code, here we take an example where the auth is resolved from a json file

After the creation the AuthResolver.ts looks like this:

import { Injectable } from "@angular/core";
import { IAuthResolver } from "@rxweb/angular-router";
import { HttpClient } from "@angular/common/http";
import { ApplicationObjects } from "./application-objects";

@Injectable({
  providedIn: "root"
})
export class AuthResolver implements IAuthResolver {
  constructor(private http: HttpClient) {}

  resolveAuth(): Promise<{ [key: string]: any }> | { [key: string]: any } {
    var promise = new Promise<{ [key: string]: any }>((resolve, reject) => {
      // Your custom logic here
      if (ApplicationObjects.user == undefined)
        this.http.get("assets/json/user.json").subscribe(response => {
          ApplicationObjects.user = response;
          resolve(response);
        });
    });
    return promise;
  }
}

Further adding it in authentication parameter of the @routerModule we created before:

@routerModule({
    authentication: AuthResolver,
    authorization :,
    middlewares : [] 
  })
@NgModule({...})
export class AppModule { }

Here is the working example of the Authentication resolver

Conclusion

In this article we covered a basic go through along with the advantages of @rxweb/angular-router package along with centralized authentication. @rxweb/angular-router also provides globally accessible authorization and middlewares which are used to resolve the authorization object and perform actions pre-route navigation.

How to make ionic Reactive Forms using RxWeb

Ushmi Dave — Fri, 11 Dec 2020 15:24:03 +0000

In this article we learn how to create a reactive form in a cross platform application which uses RxWeb model based approach for creating and validating the form

An efficient way to increase the capability of an enterprise application using a well designed form with proper input validations

The below case describes a use case in which the user registration in which there are three fields FirstName, LastName and email address and all these things are mandatory for the registartion process

Objective

To use an elegant approach to construct this form in a simple way without writing much complicated business logic involved in the component

This can be achieved using @rxweb/reactive-form-validators which has an approach to design a model based validation form and has many useful in-built validations like unique, choice, compare etc...

Model Based forms contains a model class having the initialized properties using validators which are used to build the form in the contains model, component and HTML based architecture.
For more about model driven forms please refer Simplified Angular Reactive Forms

How

Start by installing the rxweb package from the npm using the below command :

npm i @rxweb/reactive-form-validators

@NgModule({
  declarations: [AppComponent,UserComponent],
  entryComponents: [],
  imports: [BrowserModule,RxReactiveFormsModule, CommonModule,FormsModule, ReactiveFormsModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Lets begin the implementation by creating a model class

Model

This model contains a class Named User with the required properties in which the annotation is used from the rxweb validators, in this the model can contain one or more annotation

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

export class User {

  @required()
  firstName: string;

  @required()
  lastName: string;

  @required()
  Email: string;
}

Component

Using the above model the FormGroup is bind using the formGroup method of the RxFormBuilder which is responsible for the forming of the userFormGroup as mentioned below in the code. The FormGroup which consist of the properties of the user model as a FormControl along with the applied validations.

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',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
})
export class UserComponent implements OnInit {
  userFormGroup : FormGroup
  constructor(private formBuilder: RxFormBuilder) { }

  ngOnInit() {
    this.userFormGroup = this.formBuilder.formGroup(User);
  }
 userRegistrationFormGroupSubmit() {
    console.log(this.userFormGroup.getRawValue());
  }
}

Html

As we are using the ionic framework which is used for hybrid cross platform application development in which we will use the ion tags for making it compatible for mobile and web both.

Here the validation messages are displayed from the globally configured in the app component during the initialization of the application as below

  initializeApp() {
    ReactiveFormConfig.set({"validationMessage":{"required":"This field is required."}});
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

The Html code:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic Rxweb Reactive Form Validators
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card>
    <ion-card-content>
      <form [formGroup]="userFormGroup" novalidate (ngSubmit)="userFormGroupSubmit()">
        <ion-list>
          <ion-item-divider color="primary">User Profile Info</ion-item-divider>
          <br>
          <ion-item-divider color="light">
            <ion-label>
              General
            </ion-label>
          </ion-item-divider>
          <!-- FirstName Field. -->

          <ion-item
            [class.has-error]="(userFormGroup.get('firstName').hasError('required') || userFormGroup.get('firstName').hasError('required')) && userFormGroup.get('firstName').touched">
            <ion-label position="floating">FirstName *</ion-label>
            <ion-input type="text" formControlName="firstName"></ion-input>
          </ion-item>
          <ion-item lines="none"
            *ngIf="(userFormGroup.get('firstName').hasError('required') || userFormGroup.get('firstName').hasError('required')) && userFormGroup.get('firstName').touched">
            <div class="error-message">
              <small *ngIf="userFormGroup.get('firstName').hasError('required')">
                {{ userFormGroup.controls.firstName.errors.required.message}}.<br /></small>
            </div>
          </ion-item>
          <!-- LastName Field. -->
          <ion-item
            [class.has-error]="(userFormGroup.get('lastName').hasError('required') || userFormGroup.get('lastName').hasError('required')) && userFormGroup.get('lastName').touched">
            <ion-label position="floating">LastName *</ion-label>
            <ion-input type="text" formControlName="lastName"></ion-input>
          </ion-item>

          <ion-item lines="none"
            *ngIf="(userFormGroup.get('lastName').hasError('required') || userFormGroup.get('lastName').hasError('required')) && userFormGroup.get('lastName').touched">
            <div class="error-message">
              <small *ngIf="userFormGroup.get('lastName').hasError('required')">
                {{ userFormGroup.controls.lastName.errors.required.message}}.<br /></small>
            </div>
          </ion-item>

          <!-- Email Field. -->
          <ion-item
            [class.has-error]="(userFormGroup.get('Email').hasError('required') || userFormGroup.get('Email').hasError('required')) && userFormGroup.get('Email').touched">
            <ion-label position="floating">Email *</ion-label>
            <ion-input type="email" formControlName="Email"></ion-input>
          </ion-item>
          <ion-item lines="none"
            *ngIf="(userFormGroup.get('Email').hasError('required') || userFormGroup.get('Email').hasError('required')) && userFormGroup.get('Email').touched">
            <div class="error-message">
              <small
                *ngIf="userFormGroup.get('Email').hasError('required')">{{ userFormGroup.controls['Email'].errors.required.message}}.<br /></small>

            </div>
          </ion-item>
          <ion-row no-padding justify-content-center>
            <ion-col col-auto text-right>
              <ion-button [disabled]='!userFormGroup.valid' type="submit" fill="clear" size="small" color="primary">
                <ion-icon name='send' slot="start"></ion-icon>
                Send
              </ion-button>
            </ion-col>
          </ion-row>
        </ion-list>

      </form>
    </ion-card-content>
  </ion-card>
</ion-content>

Result

The above image displays the output after completion of the following process

Conclusion

In this article we learned creating a model based reactive form and using the model driven approach along with the integration of RxWeb validations in an ionic application.

Localization in Angular Applications using RxWeb

Ushmi Dave — Thu, 19 Nov 2020 05:58:37 +0000

Localization in an angular application can increase its efficiency to solve business problems as it helps the software to attach people through their locale or language

Translated apps have an ability to focus on users having different language, culture and place. In this article I am going to discuss implementation of internationalization in angular applications using @rxweb/translate

Concept

1) Taking care of two major factors : Maintainability and Consistency
2) Keeping the source code and the translation cords seperate
3) Globally resolving translated data, setting default language and adding languages
4) Following right coding practices and standards

Get Started

let's get started by installing the package

npm install @rxweb/translate

Registration of the Module :

Import the generated Translate in app.module.ts as below:

For the module in the application, import theTranslateModule as well
app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { RxWebModule } from './rxweb.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
     RxTranslateModule.forRoot({  
      cacheLanguageWiseObject: true,
      globalFilePath: "assets/i18n/{{language-code}}/global.{{language-code}}.json",
      filePath: "assets/i18n/{{language-code}}/{{translation-name}}.{{language-code}}.json"})
  ],
  providers: [RxTranslateModule],
  exports: [RxTranslateModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

RxTranslateModule file contains properties with their usage as below:
1) cacheLanguageWiseObject : Set it true to maintain cache of the translation keys to increase the performance.
2) globalFilePath : Set the global translation file to resolve the
global translation objects component wise or eg: for en(global.en.json)
3) filePath : Set the file path for resolving the translation objects in each module in respect to its translation name eg : for login(login.en.json)

Resolve Global Translate Data :

In the app component resolve the @translate decorator object to get the translated global data

app.component.ts:

import { Component } from '@angular/core';
import { translate } from '@rxweb/translate';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   @translate() global: any;
}

Bind The text :

Bind the text based upon the resolved object in app component using two way binding(Interpolation) used in angular

app.component.html:

{{global.Title}}

Form The Json :

The translation objects are resolved from the global file path and the structure of the json files is as below:

Forming the json in the files as keys based upon the multilingual content you want. Say for example you are translating your content into two languages(en and fr) then the title would be formed as:

Output :

Here is the output of the above code. A complete basic example can be viewed on stackblitz

Resolve Component Based Translation Data

In the component resolve the @translate decorator object to get the translated
data based upon the translation name, Here is an example of a login component so here the translation name will be login

import { Component, OnInit } from '@angular/core';
import { translate, RxTranslation } from '@rxweb/translate';

@Component({
  selector: 'app-login-component',
  templateUrl: './login-component.component.html',
  styleUrls: ['./login-component.component.css']
})
export class LoginComponent implements OnInit {
  @translate({translationName:'login'}) login: any;
  constructor(){

  }
}

Bind The text :

Bind the text based upon the resolved object in login component using the same way as global translation using the login object

app.component.html:

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">{{login.emailLabel}}</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">{{login.emailNoteText}}</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">{{login.passwordLabel}}</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">{{login.checkOutText}}</label>
    </div>
    <button type="submit" class="btn btn-primary">{{login.submitText}}</button>
</form>

Form The Json :

The translation objects are resolved from the file path and the structure of the json files is as below:

Forming the json in the files as the keys based upon the multilingual content you want. Say for example you are translating your content into two languages(en and fr) then the title would be formed as:

Output :

Here is the output of the login component as below :

Features

• Simple, Maintainable and Readable Translation Code.
• Lazy Load Translation Content Component Wise with Angular PreLoadModule Stratergy.
• Language Translation By URL or Code.
• FormControl Error Message Translation.
Powerful CLI with the features of Key Extraction, Optimize JSON, etc.

Fetch the implemetation of all the features of rxweb translate in the
docs

This article is published by ibidemgroup for spanish users

Extend @ngx-translate/core Feature with @rxweb/ngx-translate-extension

Ushmi Dave — Mon, 02 Nov 2020 06:55:18 +0000

In this article, we will explore how to migrate an exisiting ngx-translate project to @rxweb/ngx-translate-extension which performs translation in the angular application

@rxweb/ngx-translate-extension is an extensible library available with lots of spectacular features which can be used by existing ngx-translate projects as well as non translate integrated projects. This library is designed to perform an extensible, spectatular, simplified and powerful internationalization in an angular application. To know more about this translation package view this article on Why @rxweb/ngx-translate-extension is intuitive than others ?

While looking for the best optimum solution to internationalize the angular project i went through a project on github. This project includes resolving the translation service and using attribute directives and pipes using manual language changing strategy

For existing @ngx-translate projects

Here is How To migrate the existing project and use the extensible features of @rxweb/ngx-translate-extension

I have cloned the github project of angular-localization-ngx and installed the nodemodules using command npm i, It contains one feeback forms which language changing manaually using code in the navbar and the output is as below :

Considering this github project example we need to follow the steps as mentioned below:

Installation

In the project install the necessary packages using below command :

npm i @rxweb/translate @rxweb/ngx-translate-extension

Import Translate Module

Resolve the translate module in app.module.ts by changing the import from @ngx-translate/core to @rxweb/ngx-translate-extension and resolve the global file path as below:

Translate Service Import

In the translate service file change the import the same way as done previously in the root module

The project is now migrated and ready to use the extended features provided by these packages. To ensure whether everything is running perfect and no service is broken check the spec comparison page where the same code is copied by following same steps of @ngx-translate/core

Conclusion

Here we covered the process to migrate the existing translation project to @rxweb/ngx-translate-extension

Among all the features covered by this package the most intuitive features are decorators, sanitizers which arent available in any other translation package currently, Besides this it includes power tool to optimize the translation keys including a powerful CLI

The complete information about this package is covered into the docs, You can share your comments and and suggestions on gitter channel.

Intuitive Decorators of RxWeb for Angular Reactive Forms

Ushmi Dave — Fri, 14 Aug 2020 13:11:08 +0000

In this article, we discuss rxweb decorators, which help us to reduce the HTML template code and make our code more readable; likewise:

Show error messages conditionally.
Disabling FormControl conditionally without subscribing any FormControl ValueChanges,
Conditionally assign a class on the element.

If you are unaware about the decorator-based validation in reactive forms using RxWeb, then I would suggest referring to this good article Decorator based reactive forms in Angular — An efficient way to validate forms

Import the decorator after Installing @rxweb/reactive-form-validators, after installing import RxReactiveFormsModule in the main module of the angular project

@disable

We come accross a lot of cases where we need to disable a control conditionally, In other words disable a control based upon other input's value. In this case the field of License Number becomes abled only when the age is greater than equal to 18

Stackblitz Example : Open

This is achieved using the following steps

1) user.model.ts:

import { disable, prop } from "@rxweb/reactive-form-validators";
import { AbstractControl } from "@angular/forms";

export class User {
  @prop()
  age: number;

  @disable({
    conditionalExpression: function(control: AbstractControl) {
      return this.age <= 18 ? true : false;
    }
  }) 
  @prop()
  licenseNumber: string;
}

2) user.component.ts:

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;
    constructor(private formBuilder: RxFormBuilder) { }

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

3) user.component.html:

<form *ngIf="userFormGroup" [formGroup]="userFormGroup">
    <div class="form-group">
        <label>Age</label>
        <input type="text" formControlName="age" class="form-control"  />
    </div>
    <div class="form-group">
            <label>License Number</label>
            <input type="text" formControlName="licenseNumber" class="form-    control"  />
    </div>
</form>

@elementClass

Setting css class based upon some condition into a formControl. In this case the invalid class is applied when the state is touched or dirty and has errors

Stackblitz Example : Open

1) user.model.ts:

import {  prop,elementClass,alpha } from "@rxweb/reactive-form-validators"
import { AbstractControl } from "@angular/forms"

export class User {


   @elementClass({
       conditionalExpression: function (control:AbstractControl) {
           return (control.touched || control.dirty) && control.errors ? 'has- error' : '';
       }})
   @alpha()
   userName: string;
}

2) user.component.ts:

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;
    constructor(private formBuilder: RxFormBuilder) { }

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

3) user.component.html:

<form *ngIf="userFormGroup" [formGroup]="userFormGroup">
    <div class="form-group">
      <label>User Name</label>
      <input type="text" formControlName="userName" class="form-control"  />
    </div>  
</form>

@ error

This decorator is used to display error based upon some condition. In this case the error messages are displayed when the submit button is clicked

Stackblitz Example : Open

1) form.model.ts:

import { required,error,prop } from "@rxweb/reactive-form-validators"
import {AbstractControl } from "@angular/forms"
export class FormField{

  @prop()
  action:string;

  @error({conditionalExpression:function(control:AbstractControl){ return this.action === "submit"}})
  @required()
  firstName:string;

  @error({conditionalExpression:function(control:AbstractControl){ return this.action == "submit"}})
  @required()
  userName:string;

}

2) user.component.ts:

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

import { RxFormGroup,FormGroupExtension,RxFormBuilder,FormBuilderConfiguration,RxwebValidators } from '@rxweb/reactive-form-validators';
import { FormField } from './form.model';


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

    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
      var formField = new FormField();
        this.userInfoFormGroup =<RxFormGroup>this.formBuilder.formGroup(formField);
    }

    submit(){
      if(this.userInfoFormGroup.invalid)
        this.userInfoFormGroup.controls.action.setValue("submit");

    }
}

3) user.component.html:

<form [formGroup]="userInfoFormGroup">
    <div class="form-group">
        <label>First Name</label>
        <input type="text" formControlName="firstName" class="form-control"  />
        <small class="form-text text-danger" >{{userInfoFormGroup.controls.firstName["errorMessage"]}}</small>
    </div>
    <div class="form-group">
        <label>User Name</label>
        <input type="text" formControlName="userName" class="form-control"  />
        <small class="form-text text-danger" >{{userInfoFormGroup.controls.userName["errorMessage"]}}</small>
    </div>
    <button (click)="submit()" class="btn btn-primary">Submit</button>
</form>

Conclusion

This article show some of the best and most used cases which is fulfiled in the most intuitive and elegant way using model based approach, To know more about other useful decorators refer documentation section

These features of translation using decorator approach can help you to achieve a lot of scenarios where there exist to enhance the power of internationalization into your angular application in the most simple and intuitive manner with best practices implemented.

Why @rxweb/ngx-translate-extension is intuitive than others ?

Ushmi Dave — Mon, 15 Jun 2020 17:45:14 +0000

Background

Most of the angular developers must have faced a need to integrated so and so translation library to internationalize the angular application with lot of translation features
But have you analyzed the maintainability, simplicity and readability of the code. How much consistency does the library provide while resolving the translation data.

Confused about how to compare ???

Clean Code Comparison

Since there are a lot of translation libraries available for translation, RxWeb has compared more often used translation libararies
When we talk about clean code it includes verifying it at many steps right from the configuration to rendering it into the user interface

How is it different from :

Transloco:

No Compulsion to use `OnPush` change detection stratergy
No to Impure Pipes, Method, Attribute Directive, Using the Simple Object property for binding the multilingual text
One Time Configuration through out application
Zero Multiple package dependency
Zero Subscription for Language Change or other necessary things.
Not required to use `ng-container` for resolving multiple translations.
Template Code is much simple, as there is no need to pass the parameter for translate text interpolation or write the conditional code in the HTML template.

Angular-L10n:

Zero Subscription.
Pure Pipe works well without passing the Language Code as additional parameter.
Binds the FormControl Error Messages without using the Pipes.

Angular-I18next

No need to set the additional configuration on Routes.
Automatically Format the Text without passing the parameters or formatter name in HTML template.

How this is more intuitive in terms of Clean Code?

As RxWeb follows best design practices and approach to use clean code. Here are some glimpes of some of the basic features provided by its translation library.

Simple Translation

This is the one of the most beautiful feature 🙃 of the library relies on the Angular interpolation for displaying a localized text in the respective view template with double curly braces syntax. Have a look at the code 👇

Component:

Html:

Json:

Component Scoped Binding with Translation

We use Angular interpolation for Component Scoped Property Binding with translation text, This gives fantabulous 😲 solution of the problem of writing the little lines of business logic in the template and with this way the template is much clear.

Html:

Json:

Conditional Scoped Translation

One of the richest feature of the library 😍, which gives complete felxibility to run the translation property string code same as same as existing component scoped method.

Component:

Html:

Json:

This library with lot of other translation features can be installed using npm. This is an extensive library of ngx-translate, have a look at all other features.

Conditional Validation In Angular Using RxWeb

Ushmi Dave — Sat, 04 Apr 2020 12:35:10 +0000

Forms require a lot of validation scenarios in which one of the most common needed is conditional validation which is used in very front end application.

When it comes to applying conditional validation angular it requires a custom function having a lot of if and else conditions with fetching the formControl value and checking it!!😥

But Not Always🙂, Conditional validation is possible with a simpler, neater and lesser code with just using one property during assigning the validator during the formControl initialization itself

This is possible with the help of @rxweb/reactive-form-validators. This package provides more than 50 in-built validators with every necessary property used to validate the form.

Here I have a project registration form in which there are two scenarios, project registration can be done individually or by group name, incase of individual project fullName field should be required and incase of team project teamName should be required. This is how conditional validation is done.

The condition is applied using conditionalExpression property which can be set as Function or string.

The conditionalExpression as function can be written as:

 RxwebValidators.required({conditionalExpression:(x,y) => x.projectType == "Individual"  })

The conditionalExpression as string can be written as :

RxwebValidators.required({conditionalExpression:'x => x.projectType == "Team"' })

Along with required validation, conditional validation can be applied to all the validators available in the package using conditionalExpression property.

The complete component code is as below:

export class ProjectComponent implements OnInit {
    userFormGroup: FormGroup
Types = ["Team","Individual"];
    constructor(
        private formBuilder: FormBuilder )
    { }

    ngOnInit() {
        this.userFormGroup = this.formBuilder.group({
            projectType:[''], 
            teamName:['', RxwebValidators.required({conditionalExpression:'x => x.projectType == "Team"' })], 
            fullName:['', RxwebValidators.required({conditionalExpression:(x,y) => x.projectType == "Individual"  })], 
        });
    }
}

The Html code is as below:

<div>
  <form  [formGroup]="userFormGroup">
      <div class="form-group">
      <label>Project</label>
      <select formControlName="projectType" class="form-control">
        <option [value]="item" *ngFor="let item of Types">{{item}}</option>
      </select>
      <small class="form-text text-muted">Based on selection of project type conditional validation is applied<br/></small>
    </div>
    <div class="form-group">
      <label>Team Name</label>
      <input type="text" formControlName="teamName" class="form-control"  />

    <small class="form-text text-danger" *ngIf="userFormGroup.controls.teamName.errors">{{userFormGroup.controls.teamName.errors.required.message}}<br/></small>
    </div>
    <div class="form-group">
      <label>Full Name</label>
      <input type="text" formControlName="fullName" class="form-control"  />

    <small class="form-text text-danger" *ngIf="userFormGroup.controls.fullName.errors">{{userFormGroup.controls.fullName.errors.required.message}}<br/></small>
    </div>
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
  </form>
</div>

The complete example on stackblitz Feel free to share your comment and inputs.

Angular Reactive Form Value Reset Stratergy using RxWeb

Ushmi Dave — Wed, 01 Apr 2020 18:25:41 +0000

Angular provides initialization of formControl values during init of the component with we want as the input value to be rendered on the HTML DOM whenever the component is loaded

In such cases, whenever we reset the form it clears the input value but what if we want to reset the form to the initialized values. I found a solution to it using resetForm method of @rxweb/reactive-form-validators

Before moving towards how to achieve the same, Let's show how it is different from the angular reset

Reset form also needs different strategies if there are nested formGroups and formArrays involved in the form. First we will see the basic reset form.

Component :

export class ResetCompleteValidatorComponent implements OnInit {
    userFormGroup: RxFormGroup

    constructor(
        private formBuilder: RxFormBuilder, private http: HttpClient )
    { }

    ngOnInit() {

   this.userFormGroup = <RxFormGroup>this.formBuilder.group({
    firstName:[''],
    lastName:[''],
    userName:[''],
    password:['']
        });
    }
     resetForm(){
        this.userFormGroup.resetForm();

      }
}

Component Html:

<div>
    <form  [formGroup]="userFormGroup">
      <div class="form-group">
        <label>First Name</label>
        <input type="text" formControlName="firstName" class="form-control"  />
      </div>

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

      <div class="form-group">
        <label>User Name</label>
        <input type="text" formControlName="userName" class="form-control"  />
      </div>

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

      <button [disabled]="!userFormGroup.valid"  class="btn btn-primary">Submit</button>
       <button (click)="resetForm()"  class="btn btn-primary">Reset</button>
    </form>
  </div>

For forms having nested formGroup and formArrays there are several reset form strategies which the help of setting ResetFormType as below:

ControlsOnly

It will reset the formControls only.

    resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.ControlsOnly});       
      }

FormGroupsOnly

It will reset the formGroups only

   resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.FormGroupsOnly});

      }

FormArraysOnly

It will reset the formArrays only

   resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.FormArraysOnly});
      }

ControlsAndFormGroupsOnly

It will reset the formGroups and formGroups

  resetForm(){        
 this.userFormGroup.resetForm({resetType:ResetFormType.ControlsAndFormGroupsOnly});

      }

DefinedPropsOnly

It will reset the defined properties

resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.DefinedPropsOnly,value:{ firstName: 'John' }});

      }

All

It will reset all including formGroups,formGroups and formArrays

resetForm(){
        this.userFormGroup.resetForm({resetType:ResetFormType.All});       
      }

with

If you want some specific formControls or formArrays to revert, you need to set with and specify the formControl or formArray name.

 resetForm(){
        this.userFormGroup.resetForm({ with: ["firstName","address.areaName"] });

      }

value

If you want to reset a particular property value property can be used.

  resetForm(){
        this.userFormGroup.resetForm({ value: { firstName: 'John' } });

      }

Reset forms provides these reset form types to initialize the formControl value whenever complex forms are involved. Here is the complete example

5 Reasons to Choose Model Based Reactive Forms Using RxWeb

Ushmi Dave — Tue, 31 Mar 2020 17:41:11 +0000

Enterprise applications build in angular are not just data binding components, they involve lots of new business rules, use cases implemented everyday with a lot of increasing complexity to fulfill the application needs.

To construct a modular angular application does not only require inserting and reading data, It also involves managing data integrity, validations, coding consistency, reuse-ability with the best efficient way out there Here are some benefits of using model based angular reactive forms approach

For detailed information on how to create a model based reactive form visit this article

Simplified Components

Components are tend to process for performing various actions on the data which involves large forms including formArrays, nested form groups and complex types of validations which involve a lot of custom business logic to be written which results to lengthy and clumsy code of the component. While using model driven approach all these things are maintained in the model class and then the props are grouped in the form as a control

Model

import { prop } from   "@rxweb/reactive-form-validators"   

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

        @prop() 
       lastName: string;        
}

Component

    export class UserComponent implements OnInit {
    userFormGroup: FormGroup

    constructor(
        private formBuilder: RxFormBuilder    ) { }

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