Tuesday, 11 February 2020

Angular material form level validations

@angular/cli: 8.3.23
Source: GitHub

This article talks about performing field-level validations across a reactive form using Angular material. The solution aims to perform cross-field form validation and then display the error as mat-error for a selected field.

This is how it would be:

Both the errors shown above are registered on the FormGroup. But the goal is to display them as mat-error on certain fields.

So how do we do this? To begin with, let's set up the form and the corresponding cross-field validations.





And we are set up in terms of the code required for the validation part. But how do we display the error as mat-error for a specific field? The mat-error only displays error when the specific field is in an error state. But our requirement is to mark it invalid when the form is invalid (and not just the specific field).

To achieve this, we use an interface called ErrorStateMatcher. This interface implements a method isErrorState, where we can write the logic to mark a form-control as invalid.

We create a class which implements this interface, and then create two instances of this class to use for the two validation methods.



Now we map these instances to the fields on which we would want to see the mat-errors.



The [errorStateMatcher] properties are mapped to the respective class instances, which allow the respective fields to be invalid and show mat-error once the form becomes invalid.

Cheers!

Thursday, 23 January 2020

Firebase hosting and functions with Travis

@angular/cli: 8.2.0
Source: GitHub

This is a short article which describes the steps to automate the deployment process of your Angular application to your firebase project, using Travis.

Application deployed at https://travis-cicd.firebaseapp.com

There are a few pre-requisites to understanding this flow:
1. You have a firebase project created.
2. You have created a firebase token required for Travis to identify your firebase project. You may refer to this document to create the token. This token should be added to the Travis project.


The aim is deploy the application (via hosting) and the functions to the firebase project. However, the important point to note here is: the angular project and the functions folder each has a separate package.json file. This means that each folder should have a separate node_modules folder.

The before_script hook navigates into the functions folder and performs "npm ci". It also installs firebase-tools globally so that the firebase commands can be used for deployment.


The script hook performs the build for both the functions and the angular project. After the before_script hook, we are in the functions folder. Once the lint and build of functions is done, we navigate to the parent folder and perform the angular build.


These processes are configured to run only on the master branch. No activities occur when you commit changes to any other branch.


The deploy hook performs the actual deployment of the functions and hosts the build angular application to the firebaseapp. Travis ensures that this hook is NOT fired when it checks a pull request. This hook is fired only when a pull request is merged with the master branch.


Let's see a demo with a branch pull request and a master-merge.

When I make a change to a branch and raise a pull request, Travis fires a build for sanity check.




Now when I merge this pull request into master, another build triggers which eventually also performs the deployment tasks.



And that is all.

Cheers!