Using Reactive Form in Angular JS

The proliferation of web applications has resulted in an increase in demand for app development frameworks that boost the speed and functionality of an app. Oodles Technologies is a web app development company that uses Angular 8.0 to boost the performance of web applications. Our AngularJS apps developers build robust apps that work seamlessly across different operating systems( OS).

As an Angular JS development company, we use Forms in frontend to keep a track of global form state and to understand which part of the form is valid and which is invalid. On the front-end, we display the error messages to the user so that the user will easily understand what he should do to make the form valid.

Using Reactive Form

We first import Reactive Form Module in our app.module.ts file. then will write the Reactive Form Module in the import array

import {NgModule} fro"@angular/core";

import {ReactiveFormsModule} from "@angular/forms";

@Component({...})

export class App { }

@NgModule({

    declarations: [App],

    imports: [BrowserModule, ReactiveFormsModule],

    bootstrap: [App]

})

export class AppModule {}

The Important thing to note here is that we can't apply disabled property in HTML input elements because it doesn't work that way. we need to write the disabled inside formControl in ts file

Now angular uses the form group to create the form model the constructor of the same class then takes an object, which can contain sub-form-groups and form control. 

We also need to import the Form Group, Form Control, Validator and Form Builder in the ts file while using the reactive form

import { FormGroup, FormControl, Validators, FormBuilder }

from '@angular/forms';

@Component({

selector: "model-driven-form",

templateUrl: 'model-driven-form.html'

})

export class ModelDrivenForm {

form: FormGroup;

ptoValidations(): void {

this.form1 = this.formBuilder.group({

FirstName: new FormControl(

this.FirstName ? this.FirstName : ' ', [

Validators.required,

]),

SecondName: new FormControl(this.SecondName , disabled = "true")

Password: this.Password,

});

}

Validator: To make outfield required we have to write this in ts file and can apply any type of validations we want including validation .required, validation.minlength, validation.maxlength

Form Group: Form group is applied inside the HTML in a form tag to provide the name to out form 

Form Control: Form control is the smallest unit possible which represents the HTML elements like input, select, etc.

Form Builder: To build the form model we use the form builder. But one thing to keep in mind is that if we are using the form builder then we have to define the default value of each field

This is how our reactive form looks like in HTML  

<form [formGroup]="form1" (ngSubmit)="onSubmitting()">

<label>First Name:</label>

<input type="text" formControlName="FirstName">

<label>Secound Name:</label>

<input type="password" formControlName="LastName"

<label>Password:</label>

<input type="password" formControlName="Password">

<button type="submit" [disabled]="!form1.valid">Submit</button>

</form>

This helps to decrease the complexity of the form little bit easier one more thing to note down while using the reactive form is that we should try to avoid the ngModel in HTML because if we apply ngModel then the form value will be available in two different places the view model and the form group.

Here we have applied the disabled property to the form submit button which means until we fill the required field in the form the Submit button will remain disabled.

When we are hiding some fields inside the checkbox. Like if we check some fields then only some fields will be shown. So we just have to disable the hidden fields until we make it visible in the browser otherwise this will show an error.

We are a SaaS application development company that provides robust apps for businesses across the globe. We use frameworks like Angular, Node, and React for app development. Get in touch with our experts to know which framework is best suitable for business app development!