Mirza Leka

Posted on Apr 7

Angular Reactive Forms Basics

#angular #forms #rxjs

Angular Reactive Forms is a feature provided by the Angular framework that allows you to create and manage complex forms reactively. Reactive forms provide a model-driven approach to handling form inputs whose values change over time.

Why use Reactive forms?

Model-Driven approach

With Reactive forms, you create a form model, controls, and validations in the TypeScript component and bind it to the template.

Declarative dynamic behavior

Once the form model is created and is wired with the template, any changes made to the form controls are automatically reflected in the form's state, without the need for explicit event handling.

Observables

Reactive Forms in Angular heavily utilize observables. Each form control is represented as an observable stream of values that you can operate on (using Rx.js operators).

Form Controls

Each form field is a form control that is part of the form group. You declare the controls within the component and set a default value and validation rules for each. Controls and validations can be dynamically added or removed as well.

Creating your first form

Step 1: Importing ReactiveFormsModule in your App Module:

@NgModule({
  imports: [
    // other imports...
    ReactiveFormsModule
  ],
  // other declarations and providers...
})
export class AppModule { }

If you're using Standalone components then you import the module into the imports array:

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent

Step 2: Setup a form using FormBuilder

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit {
  myForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({ // Form Group
      username: [''], // Form Control
      email: [''], // Form Control
      password: [''], // Form Control
    });
  }

  onSubmit() {
    console.log('Form values: ', this.myForm.value);
  }
}

Step 3 - Binding Form to the template

As we can see the form group contains a list of form controls. We're going to use the form group and the controls to bind each field in the HTML template.

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div>
    <label>
      Username:
      <input formControlName="username" placeholder="YOUR PLACEHOLDER">
    </label>
  </div>

  <div>
    <label>
      Email:
      <input formControlName="email" placeholder="">
    </label>
  </div>

  <div>
    <label>
      Password:
      <input formControlName="password" placeholder="*******">
    </label>
  </div>

  <button type="submit">Create</button>
</form>

Using (ngSubmit)="onSubmit()" we'll call the onSubmit() function in the TypeScript every time we click the submit button.

Step 4 - Adding Validations

When creating new form controls you can set the starter (default) value to the control:

    this.myForm = this.fb.group({
      username: ['E.g. SuperUser'], // Form Control
      ...
    });

Following the starter value, you can add a set of synchronous validations:

    this.myForm = this.fb.group({
      username: ['E.g. SuperUser', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      password: [
        '',
        [
          Validators.required,
          Validators.minLength(3),
          Validators.pattern('<REGEX>'),
        ],
      ],
    });

There is a set of built-in validations:

required
valid email
min/max length
follow a specific pattern, etc.

But you can also create your custom validators
Additionally, you can add Async validators that validate data against APIs.

    this.myForm = this.fb.group({
      username: [
        '',
        [
          /* Sync validators */
        ],
        [
          /* Async validators */
        ],
      ],
     ....

The typical use case of an async validator would be the search functionality. As you type your input into a search field, Angular will send data to the backend, check if there is a match, and return the response in real-time, e.g., check if a username exists while typing on the sign-up form.

Step 5 - Applying form validations in the HTML template

Now we tell Angular to display an error for each control when it is invalid.

   <div>
      <label>
        Email:
        <input formControlName="email" placeholder="">
        <div 
          style="color: red;" 
          *ngIf="myForm.get('email')?.invalid">
            Please provide a valid email address.
          </div>
      </label>
    </div>

To keep errors from popping up as soon as the page loads, you can apply validations only when certain conditions are met:

form control is invalid
form control is clicked on (touched)
form control has been typed on (dirty)

    <div>
      <label>
        Email:
        <input formControlName="email" placeholder="">
        <div
            style="color: red;"
            *ngIf="myForm.get('email')?.invalid && (myForm.get('email')?.dirty || myForm.get('email')?.touched)">
            Please provide a valid email address.
          </div>
      </label>
    </div>

What I like to do is create getter functions for each control and wrap the validation logic:

  get isInvalidEmail(): boolean {
    return !!(
      this.myForm.get('email')?.invalid &&
      (this.myForm.get('email')?.dirty || this.myForm.get('email')?.touched)
    );
  }

And apply it in the template:

    <div>
      <label>
        Email:
        <input formControlName="email" placeholder="">
        <div
            style="color: red;"
            *ngIf="isInvalidEmail">
            Please provide a valid email address.
          </div>
      </label>
    </div>

More Reactive form goodies

Inspect form

Read form value

this.myForm.value

Check form validity

this.myForm.valid // true / false

Inspect form interactions

this.myForm.status // INVALID / VALID
this.myForm.dirty // true / false
this.myForm.touched // true / false
this.myForm.pristine // true / false
this.myForm.untouched// true / false

Look up form controls

this.myForm.get('username') // Abstract Control
this.myForm.get('email') // Abstract Control
this.myForm.get('password') // Abstract Control

Alter Form Behavior

Clear form values

this.myForm.reset();

Clear errors

this.myForm.setErrors(null);

Mark as dirty

this.myForm.markAsDirty();

Mark as touched

this.myForm.markAsTouched();

Update validity

this.myForm.updateValueAndValidity();

As well as add/remove controls and validators.

Using the same methods for FormGroup, you can inspect or alter individual controls:

this.myForm.get('username')?.value;
this.myForm.get('username')?.valid;
this.myForm.get('username')?.touched;
this.myForm.get('username')?.dirty;
this.myForm.get('username')?.markAsDirty();
this.myForm.get('username')?.patchValue('New value');
this.myForm.get('username')?.setErrors(null);
this.myForm.get('username')?.hasError('required') // true / false
// and so on...

Use of Rx.js

Form Groups and Abstract Controls have a valueChanges property that converts form value into an Observable stream.

    this.myForm.get('password')?.valueChanges
      .pipe(
        /* Rx.js operators */
      )
      .subscribe((data: string) => {
        console.log('data :>> ', data);
      })

An example scenario would be to replace each character with an asterisk:

import { debounceTime, distinctUntilChanged, map } from 'rxjs';

    const passwordControl = this.myForm.get('password');

    passwordControl?.valueChanges
      .pipe(
        // replace all characters with asterisk
        map(currentValue => currentValue.replace(/./g, '*'))
      )
      .subscribe((newValue: string) => {
        // Observables are immutable, which is why we need to update form control with new value
        // We're using { emitEvent: false } to prevent triggering valueChanges after patchValue
        passwordControl.patchValue(newValue, { emitEvent: false })
      })

// P.S. <input type="password" does this automatically

Or emit values to an Observable only after user has stopped typing:

    this.myForm.get('searchText')?.valueChanges
      .pipe(
        // emit 500ms after user stopped typing
        debounceTime(500),
        // emit only when value changes
        distinctUntilChanged()
      )
      .subscribe((data: string) => {
        console.log('data :>> ', data);
      })

If you prefer not to use Observables, you can always use getRawValue() method.

    const val = this.myForm.get('password')?.getRawValue();
    console.log('val :>> ', val);

Next Chapter ➡️

Reactive Validation Triggers in Angular Forms

That's all for today!

For everything else awesome, follow me on Dev.to and on Twitter to stay up to date with my content updates.

DEV Community