Angular, Reactive form (FormControl, FormGroup, Validators) | Michał ...
Angular, Reactive form (FormControl, FormGroup, Validators) | Michał ... | angular reactive forms

14 Advantages Of Angular Reactive Forms And How You Can Make Full Use Of It | Angular Reactive Forms

Posted on

If you would like to apperceive the accomplishments of the appointment and accident administration flow, checkout the allotment 1 of this series.

Angular, Reactive form (FormControl, FormGroup, Validators) | Michał ..
Angular, Reactive form (FormControl, FormGroup, Validators) | Michał .. | angular reactive forms

Image Source: michalszalkowski.com

In this post, we will allocution about the app feature, technologies acclimated in the activity and how we handle assertive capacity programmatically.

Sourcecode and audience urls provided at the end of this article.

It’s because we don’t charge a amalgam / built-in app (Android / IOS / Ionic). We alone charge a website that is able to be added to home awning and accumulation the appliance files so the consecutive burden is faster (only the abstracts account & update).

We charge article that can be accessed by all phones/laptops, acutely web is a acceptable place. It’s the easiest abode to onboard our volunteers.

By the way, we don’t apprehend the app to assignment offline, because we charge absolute time database amend for attendees activities. We accept abiding & able wifi affiliation in the accident hall, so there’s annihilation to anguish about. (Though, we did accept advancement plan if internet affiliation failed)

*TL;DR; Amuse agenda that PWA is not aloof about abacus to home screen, because you can add any website to home awning anyhow (no prompt, with few added clicks in browser), it’s about bigger user experience.

These are the technologies we acclimated to body the app:

We develop, ysis and run the armpit at $0 amount (thanks Google ❤ for acceptable chargeless quota!)

There are 8 appearance in total, volunteers has bound admission to the app based on their roles, admin has added rights to administer the data:

A appealing accepted login / assurance up screen. Back the app is launched in bureaucracy approach (for aboriginal time bootstrap), admin charge to assurance up and admission herself all access. Bureaucracy approach should be disabled in production.

We use Firebase Authentication — Email / Password to administer user logins. All volunteers will assurance up themselves (normal mode). They accept no admission to any appearance afterwards assurance in though, until afterwards assigned by admin.

As mentioned in antecedent section, already volunteers assurance up, admin can administer anniversary user admission via RIGHTS screen.

Angular Reactive Forms: trigger validation on submit - angular reactive forms
Angular Reactive Forms: trigger validation on submit – angular reactive forms | angular reactive forms

Image Source: loiane.com

Here is the absolute time abstracts food anatomy for user rights:

We charge a way to bureaucracy attendee data. We accept the account in Google sheet, so what we did was catechumen the account into json format, and use LOAD awning to amount abstracts into our Database — Firestore.

This is how the abstracts attending like in database

Attendees charge to apperceive their brand id afore acrimonious up brand in allotment counter. In case attendees absent their email, volunteers will use the SEARCH awning to advice them to locate their brand id.

There are two approach of blockage in attendees:

When check-in is in brace mode, addition advance will use BADGE awning to advice award badge. The acceptance is that appearance ysis activity is faster than brand administration (need added time to acquisition brand from the stack).

For example, advance Analysis A (check-in) and Analysis B (badge) assignment as a pairs. Beneath is how the activity attending like:

Volunteer Analysis A verifies and ysis in attendee 333–3 and 444–4.

Volunteer Analysis B doesn’t charge to accept or attending at Advance Analysis A’s screen. By application BADGE screen, Analysis B can appearance the brand id in absolute time, focus on award the brand and allowance the queue.

In case of amiss check-in, which rarely happen, advance can bang on disengage and affirm the action.

Volunteers use the SHIRT awning to administer aliment distribution. Afore attendees entering the aliment hall, advance will verify their brand id, anniversary attendee should get alone one aliment bag.

We use Google Forms to accumulate user feedback. Acknowledgment abstracts is afresh busy to Google Sheets automatically.

Reactive Forms in Angular With the Firebase Database | AngularFirebase - angular reactive forms
Reactive Forms in Angular With the Firebase Database | AngularFirebase – angular reactive forms | angular reactive forms

Image Source: angularfirebase.com

Example of how abstracts attending like in Google Sheets:

Volunteers charge to verify if attendees completed the ysis afore accepting their advantageous draw ballot. We use Google Sheets API to achieve this – concern the abstracts in Sheets as json.

The easiest way to do this is:

The beneath video appearance advance verifies attendee 111–1 (completed survey) and 333–3 (not yet complete survey, LUCK on is disabled).

08. Admin: Live accident cachet amend [DASHBOARD]

Admin will adviser the real-time cachet anniversary checkpoints via DASHBOARD screen. Accomplishments will be taken if bare to boosts the activity (e.g. advertisement and admonition to aggregate goodies).

The blueprint is fatigued application Chart.js. Booty agenda that the absolute attendees ascribe box is absolutely a cardinal that we access manually, we do not abacus / sum the absolute almanac of bodies abstracts (because there’s no abacus concern in Firestore, admitting I can sum it myself). Anyway, it’s ok for us to aloof access a abundance and get the calculation.

This is how the database looks like:

Below is how a complete attendee almanac looks like in Firestore.

The aloft almanac means:

The aloft abstracts accommodate us insights on attendees activities, we use afterwards for our advertisement and statistics.

The accomplished activity is absolutely simple as you see above, no circuitous argumentation or abacus involved. Best of the time absorb on architecture abundance and architecture the PWA (Angular).

Complete Angular144 Guide: Reactive Forms in depth Part 14 - angular reactive forms
Complete Angular144 Guide: Reactive Forms in depth Part 14 – angular reactive forms | angular reactive forms

Image Source: medium.com

If you are new to Angular, to alpha an Angular PWA activity is appealing accessible with Angular CLI.

The aboriginal command creates a new activity binder event-manager with acquisition bureaucracy and application scss as appearance preprocessor, because this is a one time project, so we do not appetite to address assemblage ysis 😛.

The additional set of commands abacus PWA appearance to the activity and installing a few dependencies for firebase and chart.js.

The aftermost set of commands abacus firebase deployment config to the activity so we can arrange & host our armpit in Firebase.

For capacity bureaucracy steps, amuse accredit to README in github: https://github.com/chybie/event-manager.

If you realize, CHECK-IN, SHIRT and LUCKY awning looks the aforementioned with altered on naming.

In fact, it’s the aforementioned basic in Angular, aloof altered avenue & fields update :

I spent the best time iterate on this screen. Initial architecture was aloof an ascribe box with blazon tel , afresh we add in adjustment keys for entry, afresh abacus the key pad on screen.

We use differentiate accomplishments colours for the cachet and activity on. Volunteers are added active on the cachet changes and accomplishments performed.

Look at the screenshot above, there’s one accessory architecture capacity we put in, but a absolute effective — After check-in the attendee, the almanac still appearance on awning (as blooming background), but the ascribe box is austere & accessible for aing input, this acquiesce user to abide aing check-in, save volunteers time for a CLR click.

We use Angular Acknowledging Anatomy to handle that. By right, the ascribe box argument is reactive, already 4 chiffre is entered, we will concern database for result, and affectation the aftereffect card. Allowance the ascribe box agency allowance the aftereffect card.

However, we appetite to bright ascribe box after allowance the aftereffect card. Angular Acknowledging anatomy provides a adjustment to amend the ascribe box after battlefront update.

Angular 14 Forms: Nesting and Input Validation | Toptal - reactive ..
Angular 14 Forms: Nesting and Input Validation | Toptal – reactive .. | angular reactive forms

Image Source: thefrenchteeshirt.com

By accomplishing this, we are able to bottle the aftereffect agenda until aing entry.

Little that the volunteers know, the CHECK-IN, SHIRT and LUCKY screens absolutely abutment keyboard shortcuts on desktop absolute well.

Once volunteers focus on the screen, we will abduction the keyboard contest by application HostListener decorator in Angular.

There are alone 13 characters backspace accustomed for input:

You ability be apprehensive why we acquiesce <space>, <dot> and <dash>. These are quick agency to accomplish the beneath actions:

In fact, back you bang on <CLR>, <Green> or <Undo> on, what we do abaft the arena is abacus one added appearance in the ascribe box, so the logics will activate accordingly.

This acquiesce us to reclaim the aforementioned argumentation for both desktop and adaptable entry.

Take a attending at the ysis aftereffect area again:

We alone charge to apprehend cavalcade B abstracts to ysis if the attendees completed the survey. Beneath is the url architecture for that query:

We use chart.js to draw charts. In Angular, we can actualize a blueprint charge (e.g. ioxChart ), so we can accredit the blueprint config to draw chart.

The charge cipher is appealing beeline forward:

We get the DOM aspect bounden & initialize the chart.js Blueprint action with our blueprint config to draw the chart.

Angular Forms in Depth – nrwl - angular reactive forms
Angular Forms in Depth – nrwl – angular reactive forms | angular reactive forms

Image Source: medium.com

Since our abstracts admeasurement is small, we use Google Sheets for advertisement and statistics on all accident activities — ticketing, app abstracts & ysis result.

For those abstracts in Cloud Firestore, we consign those to CSV and acceptation to Google Sheets. You ability be apprehensive how we consign to CSV because there’s no consign to CSV action in Firebase console.

Since we alone charge to do it for one time, I briefly address a band of cipher in the app and concern the abstracts as JSON, afresh catechumen the JSON to CSV (you may use online accoutrement like this, or command band accoutrement like this to do so, booty agenda on abstracts privacy).

Probably Firebase aggregation can accede to add this affection to console?

There are a few absorbing stats that we get from abstracts we collected. Let me appearance you one.

Turn out, Malaysian are absolutely on time 👏! 81.5% of the attendees deathwatch up so aboriginal & accomplish it on time on Sunday morning 😙. Altogether, 93.5% of attendees appear afore 10am (keynote starts at 9, absolute sessions alpha at 10).

The app is not absolute (need tighter security, added able db query, bigger code, assemblage ysis etc). It is congenital by one being alone (me) in 3 not-full-days (working abounding time for company).

However, it works like a charm! All checkpoints (registration, aliment distribution, advantageous draw dropbox & brand id locator) accept basal chain / no chain at all, activity is smooth, and the best affair is we didn’t pay annihilation for the app services, hah!

If you are absorbed to comedy about with the app, appetite to use or enhance it for your aing event, actuality you go:

Of advance the app is aloof an aspect to abrade the accident flow, bodies is the key that accomplish the accident a acknowledged one. It takes a lot of efforts, commitments and affection to host an event.

That’s all! Let me end this cavalcade with a admirable photo. These are all the volunteers that accomplish time to advice out the event, acknowledgment again. ❤

14 Advantages Of Angular Reactive Forms And How You Can Make Full Use Of It | Angular Reactive Forms – angular reactive forms
| Delightful for you to my website, with this moment We’ll teach you in relation to angular reactive forms
. And from now on, this is the initial photograph:

Introduction to Angular 14 Forms | Template Driven and Reactive Forms ..
Introduction to Angular 14 Forms | Template Driven and Reactive Forms .. | angular reactive forms

Image Source: ytimg.com

Angular Reactive Forms: trigger validation on submit - angular reactive forms
Angular Reactive Forms: trigger validation on submit – angular reactive forms | angular reactive forms

Image Source: loiane.com

Angular 14 reactive forms retype password on signup (group validation) - angular reactive forms
Angular 14 reactive forms retype password on signup (group validation) – angular reactive forms | angular reactive forms

Image Source: svbtleusercontent.com

Angular Reactive Forms: trigger validation on submit - angular reactive forms
Angular Reactive Forms: trigger validation on submit – angular reactive forms | angular reactive forms

Image Source: loiane.com

Angular Reactive forms Example Awesome Angular 14 form Validation ..
Angular Reactive forms Example Awesome Angular 14 form Validation .. | angular reactive forms

Image Source: allestero.net

Angular 14 Reactive Forms vs Template Forms - Stack Overflow - angular reactive forms
Angular 14 Reactive Forms vs Template Forms – Stack Overflow – angular reactive forms | angular reactive forms

Image Source: imgur.com

Angular 14 Reactive Forms Tutorial - angular reactive forms
Angular 14 Reactive Forms Tutorial – angular reactive forms | angular reactive forms

Image Source: amazonaws.com

Angular Reactive Forms Tutorial (Angular 14) - YouTube - angular reactive forms
Angular Reactive Forms Tutorial (Angular 14) – YouTube – angular reactive forms | angular reactive forms

Image Source: ytimg.com

Gallery for 14 Advantages Of Angular Reactive Forms And How You Can Make Full Use Of It | Angular Reactive Forms