Angular Strongly Typed Reactive Forms

Trung Vo

Frontend Engineer

San Diego Angular Meetup

@trungvose

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

Angular Vietnam | @ngvnofficial

Biggest Angular group in APAC
Advocate and grow the Angular developer community in Vietnam
14k members
Founded in 2017 by
- Tiep Phan: Angular GDE
- Chau Tran: NestJS core team
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!

A four years opened issue 🤣

https://github.com/angular/angular/issues/13721

Angular roadmap

https://angular.io/guide/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!

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

trungk18/jira-clone-angular

Reference

Thank you!

Wielkie dzięki!

Angular Strongly Typed Reactive Forms

By Trung Vo

Angular Strongly Typed Reactive Forms

Deck for ng-poland.pl 2020

1,409

Trung Vo

Trung Vo, web expert with 10 years of experience, Google Developer Expert in Angular, fosters web dev communities and speaks globally, based in Singapore.