Angular Reactive Form Validation with rxweb validation decorators

Take the advantage of @rxweb/reactive-form-validators library validation decorators within the Angular based application without writing a much code in the component.

In this article, you learn how to use rxweb validation decorators to perform validation in an Angular application. The advantage of using validation decorators of rxweb by simply adding one on more decorators — such as the @require() , @alpha() — on the class property to perform validation during the filling up the form. You don’t need to write an extra line of validation related code on HTML page or in the component.

Using the @rxweb/reactive-form-validators

First, you need to install the reactive form validators of rxweb by simply following the below steps :

1. Open the command prompt and navigate the folder of your project. If you are using Visual Studio Code then open the project folder and go to the terminal command prompt.
2. Type npm install @rxweb/reactive-form-validator . This will add the latest version of rxweb reactive form validation decorators to the project.
3. To work with reactive form validation in the angular application, first of all, you need to import FormsModuleand ReactiveFormsModule in the app.module.
4. You also need import RxReactiveFormsModulein the app.module. Because we will use rxweb decorators for reactive form validation.

See below import module code example in app.module file.

Smart way to validate the form

Lets assume you want to create user registration form.

Functional Requirement of User registration form :

In the user registration form, there are 5 fields which user needs to fill. All properties are listed below with the functional need of the registration form.

First Name: It should be required.

Last Name: It should be required.

User Name: It should be required and the user only enters the alphabets.

Password: It should be required and minimum password length should be 8.

Confirm Password: It should be required. The confirm password field value should be matched with the password field value, other the form become invalid.

Lets dive into the code.

Create User Model

First of all, we need to create user model with respective properties and also we need to apply decorators of rxweb reactive form validators to achieve the functional need of the user registration form.

In the user model we need some of the rxweb validation decorators, which are listed below:

@required(): All five properties(firstName, lastName, userName, password and confirmPassword) should be required.

@alpha() : userName property only accepts the alphabets.

@minLength() : The password property must have the minimum string length of 8 characters.

@compare() : Compare property value should be the same as password property value.

How to use rxweb validation decorators in the user class which is shown below.

Note : If you want to show the custom error message, then you can assign a custom error message to the message property parameter of the decorator. Example : @required({message:”This field is required”})

Create User Registration Component

Now you need to create a user registration component, follow some below steps :

1. We need to import the RxFormBuilder class. We inject it through our User Registration Component.
2. Implements OnInit interface in the user registration component and create the method of ngOnInit().
3. Create a user registration form group property in the component.
4. Create the form group object of the user model and set it into the userRegistrationFormGroup property. For creating form group object of user model we use RxFormBuilder object property method of formGroup. This method will bind the validators on the property based on the applied decorators in the class and returns a FormGroup object.

Create user registration form

Now you need to assign userRegistrationFormGroup property of FormGroup directive of angular. Inside the FormGroupattribute element area, you need to define all property elements. See the below code example.

Configure validation messages globally

For showing a validation if the FormControl is invalid based on rxweb reactive form validation decorator. You can write code in the app component to set the validation messages globally.

You have to use ReactiveFormConfig class set method and pass the validation message object.

Working code example

rxweb-reactive-form-validation-angular-user-registration-form - StackBlitz

There are lots of other validation decorators are available in the @rxweb/reactive-form-validators library. Please refer to the documentation.

See the @rxweb/reactive-form-validatorsall decorators example.