What is the use of reactive forms in Angular 8?

by

Reactive forms use a model-driven approach to handle form inputs where values constantly change over time. It uses an explicit and immutable approach to manage the state of a form at a specific time. Every time the changes occur to the form state, it returns a new state. The reactive forms are used mainly for the following features:

  • Reactive forms are more robust than template-driven forms.
  • Reactive forms are more scalable, reusable, and testable.
  • Reactive forms are preferred to use when the forms are a key part of the application, or the application is already built using reactive patterns. In both cases, reactive forms are best to use.It seems like there might be a bit of confusion in your question. Angular 8 primarily uses Reactive Forms, not AngularJS. AngularJS and Angular (versions 2 and above) are two different frameworks. 
  • In Angular 8, as well as in later versions, reactive forms are a feature provided by the Angular framework to handle and manage forms in a more reactive and flexible way compared to template-driven forms. Reactive forms allow you to define and manage form controls directly in the component code using TypeScript.

    Here are some key aspects and advantages of using reactive forms in Angular 8:

    1. Dynamic Form Control Handling: Reactive forms enable you to dynamically create and manipulate form controls based on user interactions or other runtime conditions.
    2. Explicit Model Management: You define the form structure and controls in the component class, providing more control over the form model and validation logic.
    3. Immutable Data Model: Reactive forms use immutable data structures, which helps in maintaining a consistent state and facilitates easier debugging.
    4. Reactive Approach: Reactive forms are built using the reactive programming paradigm, which allows you to respond to changes in the form state with observable streams.
    5. Validation: Reactive forms provide a robust system for form validation. You can perform both synchronous and asynchronous validations, and the framework helps in managing error messages and styling.
    6. Unit Testing: Because the form controls are defined in the component class, it becomes easier to write unit tests for form-related logic.

    Example of creating a simple reactive form in Angular 8:

    typescript
    import { Component, OnInit } from ‘@angular/core’;
    import { FormBuilder, FormGroup, Validators } from ‘@angular/forms’;

    @Component({
    selector: ‘app-my-form’,
    templateUrl: ‘./my-form.component.html’,
    styleUrls: [‘./my-form.component.css’]
    })
    export class MyFormComponent implements OnInit {
    myForm: FormGroup;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit(): void {
    this.myForm = this.formBuilder.group({
    username: [”, Validators.required],
    email: [”, [Validators.required, Validators.email]],
    password: [”, [Validators.required, Validators.minLength(6)]]
    });
    }

    onSubmit() {
    // Handle form submission
    console.log(this.myForm.value);
    }
    }

    In this example, formBuilder is used to create a FormGroup with FormControls for username, email, and password. Validators are applied to perform basic form validation