{"id":1783587,"date":"2020-12-11T10:29:03","date_gmt":"2020-12-11T15:29:03","guid":{"rendered":"https:\/\/www.codementor.io\/ushmidave905\/how-to-make-ionic-reactive-forms-using-rxweb-1d28ybqmfl"},"modified":"2020-12-11T10:29:03","modified_gmt":"2020-12-11T15:29:03","slug":"how-to-make-ionic-reactive-forms-using-rxweb","status":"publish","type":"station","link":"https:\/\/platodata.io\/plato-data\/how-to-make-ionic-reactive-forms-using-rxweb\/","title":{"rendered":"How to make ionic Reactive Forms using RxWeb"},"content":{"rendered":"

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<\/p>\n

An efficient way to increase the capability of an enterprise application using a well designed form with proper input validations<\/p>\n

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<\/p>\n

To use an elegant approach to construct this form in a simple way without writing much complicated business logic involved in the component<\/p>\n

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

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<\/a><\/p>\n

Start by installing the rxweb package from the npm using the below command :<\/p>\n

\n

npm i @rxweb\/reactive-form-validators<\/p>\n<\/blockquote>\n

Register the RxReactiveFormsModule<\/code> module as below in the root(App) module:<\/p>\n

@NgModule({ declarations<\/span>: [AppComponent,UserComponent], entryComponents<\/span>: [], imports<\/span>: [BrowserModule,RxReactiveFormsModule, CommonModule,FormsModule, ReactiveFormsModule, IonicModule.forRoot(), AppRoutingModule], providers<\/span>: [ StatusBar, SplashScreen, { provide<\/span>: RouteReuseStrategy, useClass<\/span>: IonicRouteStrategy } ], bootstrap<\/span>: [AppComponent]\n})\nexport<\/span> class<\/span> AppModule<\/span> <\/span>{}\n<\/code><\/pre>\n
Lets begin the implementation by creating a model class<\/p>\n
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<\/p>\n
import<\/span> { required } from<\/span> '@rxweb\/reactive-form-validators'<\/span>; export<\/span> class<\/span> User<\/span> <\/span>{ @required() firstName<\/span>: string; @required() lastName<\/span>: string; @required() Email<\/span>: string;\n}\n<\/code><\/pre>\n
Using the above model the FormGroup is bind using the formGroup<\/code> method of the RxFormBuilder<\/code> 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.<\/p>\n
import<\/span> { Component, OnInit } from<\/span> '@angular\/core'<\/span>;\nimport<\/span> { FormGroup } from<\/span> '@angular\/forms'<\/span>;\nimport<\/span> { RxFormBuilder } from<\/span> '@rxweb\/reactive-form-validators'<\/span>;\nimport<\/span> { User } from<\/span> '.\/user.model'<\/span>; @Component({ selector<\/span>: 'app-user'<\/span>, templateUrl<\/span>: '.\/user.component.html'<\/span>, styleUrls<\/span>: ['.\/user.component.scss'<\/span>],\n})\nexport<\/span> class<\/span> UserComponent<\/span> implements<\/span> OnInit<\/span> <\/span>{ userFormGroup<\/span> : FormGroup constructor<\/span>(private formBuilder: RxFormBuilder) { } ngOnInit() { this<\/span>.userFormGroup = this<\/span>.formBuilder.formGroup(User); } userRegistrationFormGroupSubmit() { console<\/span>.log(this<\/span>.userFormGroup.getRawValue()); }\n} <\/code><\/pre>\n
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.<\/p>\n
\n
Here the validation messages are displayed from the globally configured in the app component during the initialization of the application as below<\/p>\n<\/blockquote>\n
 initializeApp() { ReactiveFormConfig.set({\"validationMessage\"<\/span>:{\"required\"<\/span>:\"This field is required.\"<\/span>}}); this<\/span>.platform.ready().then(()<\/span> =><\/span> { this<\/span>.statusBar.styleDefault(); this<\/span>.splashScreen.hide(); }); }\n<\/code><\/pre>\n
The Html code:<\/p>\n
<ion-header<\/span>><\/span> <ion-toolbar<\/span> color<\/span>=\"primary\"<\/span>><\/span> <ion-title<\/span>><\/span> Ionic Rxweb Reactive Form Validators <\/ion-title<\/span>><\/span> <\/ion-toolbar<\/span>><\/span>\n<\/ion-header<\/span>><\/span>\n<ion-content<\/span>><\/span> <ion-card<\/span>><\/span> <ion-card-content<\/span>><\/span> <form<\/span> [formGroup<\/span>]=\"userFormGroup\"<\/span> novalidate<\/span> (ngSubmit<\/span>)=\"userFormGroupSubmit()\"<\/span>><\/span> <ion-list<\/span>><\/span> <ion-item-divider<\/span> color<\/span>=\"primary\"<\/span>><\/span>User Profile Info<\/ion-item-divider<\/span>><\/span> <br<\/span>><\/span> <ion-item-divider<\/span> color<\/span>=\"light\"<\/span>><\/span> <ion-label<\/span>><\/span> General <\/ion-label<\/span>><\/span> <\/ion-item-divider<\/span>><\/span> <ion-item<\/span> [class.has-error<\/span>]=\"(userFormGroup.get('firstName').hasError('required') || userFormGroup.get('firstName').hasError('required')) && userFormGroup.get('firstName').touched\"<\/span>><\/span> <ion-label<\/span> position<\/span>=\"floating\"<\/span>><\/span>FirstName *<\/ion-label<\/span>><\/span> <ion-input<\/span> type<\/span>=\"text\"<\/span> formControlName<\/span>=\"firstName\"<\/span>><\/span><\/ion-input<\/span>><\/span> <\/ion-item<\/span>><\/span> <ion-item<\/span> lines<\/span>=\"none\"<\/span> *ngIf<\/span>=\"(userFormGroup.get('firstName').hasError('required') || userFormGroup.get('firstName').hasError('required')) && userFormGroup.get('firstName').touched\"<\/span>><\/span> <div<\/span> class<\/span>=\"error-message\"<\/span>><\/span> <small<\/span> *ngIf<\/span>=\"userFormGroup.get('firstName').hasError('required')\"<\/span>><\/span> {{ userFormGroup.controls.firstName.errors.required.message}}.<br<\/span> \/><\/span><\/small<\/span>><\/span> <\/div<\/span>><\/span> <\/ion-item<\/span>><\/span> <ion-item<\/span> [class.has-error<\/span>]=\"(userFormGroup.get('lastName').hasError('required') || userFormGroup.get('lastName').hasError('required')) && userFormGroup.get('lastName').touched\"<\/span>><\/span> <ion-label<\/span> position<\/span>=\"floating\"<\/span>><\/span>LastName *<\/ion-label<\/span>><\/span> <ion-input<\/span> type<\/span>=\"text\"<\/span> formControlName<\/span>=\"lastName\"<\/span>><\/span><\/ion-input<\/span>><\/span> <\/ion-item<\/span>><\/span> <ion-item<\/span> lines<\/span>=\"none\"<\/span> *ngIf<\/span>=\"(userFormGroup.get('lastName').hasError('required') || userFormGroup.get('lastName').hasError('required')) && userFormGroup.get('lastName').touched\"<\/span>><\/span> <div<\/span> class<\/span>=\"error-message\"<\/span>><\/span> <small<\/span> *ngIf<\/span>=\"userFormGroup.get('lastName').hasError('required')\"<\/span>><\/span> {{ userFormGroup.controls.lastName.errors.required.message}}.<br<\/span> \/><\/span><\/small<\/span>><\/span> <\/div<\/span>><\/span> <\/ion-item<\/span>><\/span> <ion-item<\/span> [class.has-error<\/span>]=\"(userFormGroup.get('Email').hasError('required') || userFormGroup.get('Email').hasError('required')) && userFormGroup.get('Email').touched\"<\/span>><\/span> <ion-label<\/span> position<\/span>=\"floating\"<\/span>><\/span>Email *<\/ion-label<\/span>><\/span> <ion-input<\/span> type<\/span>=\"email\"<\/span> formControlName<\/span>=\"Email\"<\/span>><\/span><\/ion-input<\/span>><\/span> <\/ion-item<\/span>><\/span> <ion-item<\/span> lines<\/span>=\"none\"<\/span> *ngIf<\/span>=\"(userFormGroup.get('Email').hasError('required') || userFormGroup.get('Email').hasError('required')) && userFormGroup.get('Email').touched\"<\/span>><\/span> <div<\/span> class<\/span>=\"error-message\"<\/span>><\/span> <small<\/span> *ngIf<\/span>=\"userFormGroup.get('Email').hasError('required')\"<\/span>><\/span>{{ userFormGroup.controls['Email'].errors.required.message}}.<br<\/span> \/><\/span><\/small<\/span>><\/span> <\/div<\/span>><\/span> <\/ion-item<\/span>><\/span> <ion-row<\/span> no-padding<\/span> justify-content-center<\/span>><\/span> <ion-col<\/span> col-auto<\/span> text-right<\/span>><\/span> <ion-button<\/span> [disabled<\/span>]='!userFormGroup.valid'<\/span> type<\/span>=\"submit\"<\/span> fill<\/span>=\"clear\"<\/span> size<\/span>=\"small\"<\/span> color<\/span>=\"primary\"<\/span>><\/span> <ion-icon<\/span> name<\/span>='send'<\/span> slot<\/span>=\"start\"<\/span>><\/span><\/ion-icon<\/span>><\/span> Send <\/ion-button<\/span>><\/span> <\/ion-col<\/span>><\/span> <\/ion-row<\/span>><\/span> <\/ion-list<\/span>><\/span> <\/form<\/span>><\/span> <\/ion-card-content<\/span>><\/span> <\/ion-card<\/span>><\/span>\n<\/ion-content<\/span>><\/span> <\/code><\/pre>\n
The above image displays the output after completion of the following process<\/p>\n
\"Alt<\/p>\n
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.<\/p>\n