Angular Strongly Typed Reactive Forms

Frontend Engineer

San Diego Angular Meetup

About me

Hi, My name is Trung 😊

  • Experienced FE engineer, specialized in branding, interactive application
  • Frontend Engineer @cakedefi
  • Organizer @Angular Vietnam
  • Write, code, and talk about Angular
  • Biggest Angular group in APAC
  • Advocate and grow the Angular developer community in Vietnam
  • 14k members
  • Founded in 2017 by
  • 100 Days Of Angular series

Agenda

  • Angular Forms

  • Reactive Forms is not strongly typed!

  • Introducing ngneat/reactive-forms

  • Rewrite the form with typed

  • Easy migration

  • Persist form data

  • Alternative

  • Summary

Angular Forms

Template Driven

Reactive

Template Driven

Reactive

Template Driven

Reactive

Implicit creations by directive

 

 

FormsModule

ngModel

ngForm
 

 

Explicit creations in component


ReactiveFormsModule

FormGroup

FormControl

FormArray

FormBuilder

Reactive Forms is not strongly typed!

Reactive Forms is not strongly typed!

Reactive Forms is not strongly typed!

A four years opened issue 🤣

Angular roadmap

@ngneat/reactive-forms

(Angular Reactive) Forms with Benefits 😉

 Offers (almost) seamless FormControl, FormGroup, FormArray Replacement
 Allows Typed Forms!
 Provides Reactive Queries
 Provides Helpful Methods
 Typed and DRY ControlValueAccessor
 Typed FormBuilder
 Persist the form's state to a storage

What does this mean?

Rewrite the form with typed!

Rewrite the form with typed!

Rewrite the form with typed!

Rewrite the form with typed!

Rewrite the form with typed!

Easy migration to @ngneat/reactive-forms

import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

⬇️ ⬇️ ⬇️

import { FormControl, FormGroup, FormArray, FormBuilder } from '@ngneat/reactive-forms';
ng g @ngneat/reactive-forms:migrate

Persist Forms State

  initForm() {
    this.issueForm = this._fb.group<AddIssueDTO>({
      type: [IssueType.TASK],
      priority: [IssuePriority.MEDIUM],
      title: ['', NoWhitespaceValidator()],
      description: [''],
      reporterId: [''],
      userIds: [[]]
    });

    this.issueForm.persist('addIssue', {}).subscribe();
  }

What does this mean?

Notes

  • Clear the storage on submit
  • Should not save the data into storage all the time
  • Consider to warn user before close modal/form

Added Queries

ngneat

angular

value$ (raw values)

disabled$

enabled$

status$

dirty$

errors$

 

valueChanges

statusChanges

Added Helper Method

ngneat

angular

touched && errors.required
dirty && errors.required
setValue()
patchValue()

hasErrorAndTouched('required')

hasErrorAndDirty('required')

setValue()

patchValue()

disabledWhile()

markAllAsDirty()

and many more...

Alternative

Summary

  • Angular reactive forms is not typed safe
  • ngneat/reactive-forms added functionality on top of angular forms
  • Easy migration with schematics
  • Persists form state

Source code

Reference

Thank you!

Wielkie dzięki!