Angular 8 Tutorial | FormArray In Angular 8 with Example

Angular 8 Tutorial | FormArray In Angular 8 with Example

The Form Array is a way to group Form controls in Angular. We can group FormControl in Angular forms in two ways. One is using the FormGroup and the other one is FormArray. The difference is how they implement it...

The Form Array is a way to group Form controls in Angular. We can group FormControl in Angular forms in two ways. One is using the FormGroup and the other one is FormArray. The difference is how they implement it. In FormGroup controls becomes a property of the FormGroup. Each control is represented as key-value pair. While in Form Array, the controls become part of an array

Because it is implemented as Array, it makes it easier dynamically add controls.

FormArray Example in Angular 8

Angular 8 FormArray is a bit like FormGroup, and it’s used in a very similar way, the difference being that it’s used as an array that envelops around an arbitrary amount of FormControl, FormGroup or even other FormArray instances.FormArray is a class of @angular/forms module.

Constructor

constructor(controls: AbstractControl[], validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[])

The controls parameter is required, and it is an array of child controls. Each child control is given the index where it is registered.

The validatorOrOpts is an optional parameter. It is an asynchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and the validation trigger.

The asyncValidator is an optional parameter. It is a single async validator or array of async validator functions.

Properties

Angular FormArray has two properties.

  1. control: The control is an array of child controls. Each child control is given the index where it is registered.
  2. length: It is a length of the control array.

Import ReactiveFormsModule

Type the following command to create a new Angular project.

ng new angforms

Install Bootstrap 4 using the following command.

➜  angforms git:(master) ✗ npm install bootstrap --save
npm WARN [email protected] requires a peer of [email protected]^5 || ^6 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^1.16.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 1 package from 2 contributors and audited 19367 packages in 12.498s

14 packages are looking for funding
  run `npm fund` for details

found 2 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
➜  angforms git:(master) ✗

Now, add the following code inside the angular.json file.

"styles": [
   "src/styles.css",
   "./node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],

Now, write the following code inside the app.module.ts file.


// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We have imported ReactiveFormsModule because we are using the Reactive Forms approach and not a template-driven approach.

Angular 8 form classes

Creating a form using FormControl, FormGroup, and FormArray are said to be the reactive forms. They use an ng module as ReactiveFormsModule.

For every form control such as text, checkbox, radio button, we need to create an instance of FormControl in our class.

For instance, let’s say we need to create an instance of the name field.

name = new FormControl();


In our HTML template, you can use the following code.

<input [formControl]="name">

Okay, now write the following code inside the app.component.ts file.


// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  angForm = new FormGroup({
    names: new FormArray([
      new FormControl('', Validators.required),
      new FormControl('', Validators.required),
    ])
  });
}

In the above code, we have imported four angular classes.

  1. FormControl: FormControl is a class that is used to get and set values and validation of the form control such as <input> and <select> tag.

  2. FormGroup: FormGroup has a role in tracking the value and validity state of a group of FormControl.

  3. FormArray: FormArray tracks a value and validity state of the array of FormControl, FormGroup, or FormArray instances.

  4. Validators: Validators provides a set of built-in validators that can be used by form controls.

Also, we need to define one Getter method for the names array.

Write the following code inside the app.component.ts file.

// app.component.ts

get names(): FormArray {
    return this.angForm.get('names') as FormArray;
}

It will return all the names as FormArray.

Create form class instances

Then we have created a FormGroup instance called angForm.

We have passed the FormArray instance, which consists of two FormControls.

We will iterate names array in our UI. Write the following code inside the app.component.html file.

<!-- app.component.html -->

<div formArrayName="names">
  <div *ngFor="let name of names.controls; index as idx">
     <input [formControlName]="idx" placeholder="Enter a Name">
     <label *ngIf="name.invalid" [ngClass] = "'error'"> Name is required. </label>
  </div>
</div>

When we submit the form, we can fetch values as given below.

Write the following code inside the app.component.ts file.


// app.component.ts

onFormSubmit(): void {
    for(let i = 0; i < this.names.length; i++) {
      console.log(this.names.at(i).value);
    } 
  }

Dynamically add and remove fields

On the instance of FormArray, i.e., names, we will call controls that will return an array of FormControl instances. Now to add a form control at run time, we need to use the push() method of FormArray.

To remove from FormArray, we will use removeAt() function and pass the index parameter. We can remove the form control at run time; we need to use the removeAt() method of FormArray.

We are also adding validation while creating FormControl instances.

// app.component.ts

addNameField() { 
    this.names.push(new FormControl('', Validators.required)); 
}

deleteNameField(index: number) {
    if (this.names.length !== 1) { 
      this.names.removeAt(index); 
    }
}

We are also adding validation when adding a new FormControl.

That means a new, dynamically added text field has required validation.

So, our app.component.ts file looks like this.


// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  angForm = new FormGroup({
    names: new FormArray([
      new FormControl('', Validators.required),
      new FormControl('', Validators.required),
    ])
  });

  get names(): FormArray {
    return this.angForm.get('names') as FormArray;
  }
  onFormSubmit(): void {
    for (let i = 0; i < this.names.length; i++) {
      console.log(this.names.at(i).value);
    }
  }
  addNameField() {
    this.names.push(new FormControl('', Validators.required));
  }

  deleteNameField(index: number) {
    if (this.names.length !== 1) {
      this.names.removeAt(index);
    }
    console.log(this.names.length);
  }
}

Now, write our final code inside the app.component.html file looks like the below.


<!-- app.component.html -->

<div class="container">
<h3>Angular 8 FormArray Example</h3>
<form [formGroup] = "angForm" (ngSubmit)="onFormSubmit()">
  <div formArrayName="names">
    <div *ngFor="let name of names.controls; index as idx" class="form-group">
      <input [formControlName]="idx" placeholder="Enter a Name" class="form-control">
      <label *ngIf="name.invalid" [ngClass] = "'error'"> Name is required. </label>
      <button type="button" (click)="addNameField()" class="btn btn-success" [ngClass] = "'pad'">Add More Names</button>
      <button (click)="deleteNameField(idx)" class="btn btn-danger">Delete</button>
    </div>
  </div> 
  <div>
    <button type="submit" class="btn btn-primary">Send</button>
  </div>
</form>
</div>

Our CSS code inside the app.component.css file is the following.

.error{
  color: red;
  font-size: 20px;
  margin-top: 10px;
  margin-right: 10px;
}
.pad{
  margin-right: 10px;
  margin-top: 10px;
}

Now, when you start typing your name at a particular textbox, for that specific textbox, the error will disappear.

When the user submits the form, we will get all the dynamically added textbox values.

We can also add or remove the textboxes dynamically, which is really cool.

So, if you want a functionality in which you need to add dynamic fields in Angular 8, then this is your perfect solution.

See the output.

Okay, now let’s see some of the functions of Angular 8 FormArray.

Angular 8 FormArray Methods

FormArray.at()
Get the AbstractControl at the given index in the array. It is an index in the array to retrieve the control.

FormArray.push()
The push() function inserts a new AbstractControl at the end of the array. We have seen the push() method in our dynamic insert fields example.

FormArray.insert()
The insert() function inserts a new AbstractControl at the given index in the array.

Form.removeAt()
The removeAt() function removes the control at the given index in the array. We have seen the removeAt() method in our dynamic remove fields example.

You can learn more about the functions of FormArray here

Learn More

This tutorial is the end, if you find it helpful to share it with everyone. Thanks for reading!

Important reasons for developers to adopt Angular JS development

 Important reasons for developers to adopt Angular JS development

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular...

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular has been a top choice for web development and it's the latest version AngularJS has gained popularity in the industry. This java script framework has created its prominent position in creating web apps.
Regardless of whether there are numerous different systems accessible for web development, AngularJS can support among them all. Since its introduction in the market, Angular has been creating waves in the market.

Introduction

Angular js is a powerful framework that was developed by Google. It is used to build dynamic apps with power-packed features. It was first introduced in 2010 and created by developers at Google. This framework was created to simplify and remove the challenges in creating dynamic apps. It uses HTML, CSS, and java script to create dynamic single-page applications. Angular Js is inclusive of Mongo DB and it is a frontend fragment of Mean Stack. In the developer's community, Angular is considered as a reliable and fast Java script framework. Many popular apps like PayPal. You tube, Netflix, the guardian, Lego are built using the AngularJS framework.

In this blog, we are listing some compelling reasons to pick angular development to familiarize you with its potential

• Open-source framework: It is not a library but open-source frameworks that enable the developers to build well-performing single page web applications. Just after its launch, it became hugely popular among the developers and it is not going to come at a halt.

• Simplified MVC structure: Developers use AngularJS to build robust and interactive web applications. AngularJS framework uses MVC architecture to create interactive applications. AngularJS makes it easy for developers to create apps as they are only required to split the applications.

• Extensive community: As angular is built by Google, it is backed by a very large community of professionals. The Angular JS conferences of the professionals are held all over the world. Hackathons are also organized in IT communities that include some professional and skilled engineers who can help with the queries and questions related to Angular.

• Declarative code system: In Angular JS developers can create declarative patterns by using declarative paradigms. It enables developers to be less heavy, and easy to read. In this framework, the developers get data models that are not too complex to write that abolishes the need to use any getter/setters and with easy data manipulation.

• Two-way data binding: It is one of the impeccable features that makes Angularjs popular in the developers' community. It allows seamless projections of the models and data binding. In this framework, any changes in the user interface make an impact on the application objects. The developers are not required to fresh the cycle and that makes it vulnerable to bugs.

• Using directives: AngularJS makes use of Directives as the developers can build custom HTML tags that function as custom widgets and it can be possible using directives. Its implications are also in the case of the use of decorating components and manipulation of DOM elements in appealing ways.

• Enterprise-level testing: When using Angular JS there is no need for demanding any other supplementary framework or additional plugins. In the process, parts of applications are put in the angular framework which is not too complex for manipulation. In module separation, developers can load essential services in an effective way for the performance of automatic testing.

• Client-side situation: AngularJS mainly works at the client-side and it is fully compatible with both web and mobile browsers. It can function with any projects without the need for any backend notifications. The developers can easily use AngularJS for the front end of applications.

• Easy to use: AngularJS is rich with its features and facilitates developers to reduce any need for writing codes. It reduces the burden of developers by the application of MVC architecture and data models.

Many other significant features make AngularJS prioritize by the developers than other Javascript frameworks. The above-mentioned reasons have made it the top choice for reputed companies all across the globe for web development. Developers at the company master the skills to work with Angular JS development for web. The company is equipped with dedicated professionals having sound technical knowledge of working with AngularJS. We offer offshore services to extend our reach all across the globe with various models. We have more than 15 years of experience in the industry that we use to deliver high-quality solutions by leveraging the latest technology and quality standards.

How to Create an Angular Web App Quickly for Developers | Angular 8 Tutorial

How to Create an Angular Web App Quickly for Developers | Angular 8 Tutorial

A comprehensive step by step Angular 8 tutorial on how to create an Angular web app quickly

In this Angular 8 tutorial, we will show you a basic and quick way to create an Angular web app. This tutorial does not just show a simple Hello world or a default Angular generated the page, but more than that we will show using the interaction with the array of objects data in the separate file. Also, we will show you how to use a basic Angular Material, Routing, and Navigation with the parameters.

Best 17 Angular Libraries Every Angular Developers Should Know in 2019

Best 17 Angular Libraries Every Angular Developers Should Know in 2019

In this article, we list 17 useful Angular libraries that can help as you develop applications with Angular.

Angular is a web development framework for building robust single-page applications and systems. Developed and maintained by Google and community maintainers, Angular is a great library for building large scale web applications.

Angular has a huge and active community, thus, a lot of libraries have been introduced by the community to plug holes and extend the tooling provided by Angular. Today, we’ll look at some libraries that can be introduced into existing applications — libraries ranging from utility libraries to UI component libraries.

1. ng-bootstrap

It seems fair to start with the Angular implementation of the most popular UI library. The ng-bootstrap library was built from the top down using TypeScript. Unlike the previous version, it has dropped jQuery as a dependency, specifying Bootstrap’s CSS as its only other dependency. With most JavaScript components implemented, the library seems like a complete solution when using Bootstrap with Angular — as active development is ongoing, more components will be included. With almost 7k stars on GitHub, ng-bootstrap seems like a very popular choice for a lot of Angular developers.

The Angular.js version of this project is still available here, although it isn’t actively maintained.

2. Angular Google Maps

Using the Google Maps library in Angular is always a serious hassle because the library is loaded using a script tag, so type definitions aren’t readily available. This causes some compile errors that need a lot of hacking to get rid of.

The Angular Google Maps library provides services and directives for implementing Google Maps services. There are directives available for creating maps, using markers, etc. The library also provides an async function that is useful for checking if the Google Maps library is loaded on the webpage.

The project has amassed almost 2k stars on GitHub. Visit their documentation to get started.

3. ngx-translate

Building an application that supports multiple languages can be a serious struggle, especially for single-page applications. The ngx-translate is a great library for managing multiple languages in your Angular application. It provides services to load translations that can be used throughout the application. Translations can be defined and loaded using the TranslateService, and onChange listeners are also available for handling language changes within the application.

The setup is pretty straightforward, and the library is well documented with detailed examples. Visit their GitHub page to get started.

4. Angular2-jwt

Managing single-page applications that use web tokens for authentication usually requires using interceptors to append headers to network requests. While this is easy to implement, it is difficult to filter out requests that don’t require access tokens. This is where this impressive library comes in. Using the angular-jwt package by Auth0, you can load access tokens from the local storage or session storage. It provides an HttpInterceptor that appends authentication headers to the requests. The ability to blacklist or whitelist a domain is also available.

With almost 2k stars on GitHub, it is a well-documented library with adequate examples and only requires a few steps to get started.

5. AngularFire2

Looking to implement real-time functionality in your Angular application? Well look no further, this library uses the power of RxJS, Firebase and Angular to deliver data synchronization in real time. It also provides services and providers to query documents and collections on Cloud Firebase and the realtime database, handles authentication using Firebase, handles file upload to Cloud Storage, and sends Push Notifications. The package also supports server-side rendering and offline functionality. You can easily import each individual module to handle whichever functionality is required in your application. All documentation can be found in the library’s GitHub page.

6. ng2-file-upload

Handling file uploads in any single-page application isn’t a task that’s fun to deal with. It would be great if an external library could handle file upload within your web application. Valon-software, the makers of ngx-bootstrap, has you covered with ng2-file-upload, a library that makes file upload a breeze.

The library supports drag-and-drop functionality alongside the good old file select implementation. It provides a utility class (FileUploader) that handles the different file upload methods. It also provides events to monitor the file upload progress, as well as errors and success during the upload.

The library is actively maintained and has almost 2k stars on Github.

7. Angular Material 2

The list wouldn’t be complete without mentioning a library that implements Google’s Material Design specifications. Angular Material 2 is a components library created by the Angular team. It features a set of components implementing the Material Design specs, ranging from buttons to dialogs, bottom sheets, etc. It features fully customizable themes and a rich set of components that can be used to quickly build an application. Angular Material 2 comes with almost 40 components, with more components under development and four pre-built themes.

Get started with Angular Material 2 by visiting their documentation or GitHub page.

8. ngrx/store

Managing state in small applications isn’t really complicated and state can be easily managed within individual components, but when there’s a need to share data between several components, the need for a proper state management system arises. NgRx offers reactive libraries optimized for Angular. It offers reactive statement for Angular in a package called ngrx/store. This package uses RxJS technologies to offer state management similar to Redux. The store allows developers write consistent and performant applications in a state-controlled environment. Very similar to Redux, the ngrx/store library uses Action, Reducers, Select and Store to manage the data flow within Angular applications. Get started with ngrx/store by following the steps listed in the library’s documentation.

9. Cloudinary Angular SDK

Cloudinary is SaaS web platform for managing media assets on mobile and web applications. It provides services for upload, storage, manipulation and delivery of media assets. Cloudinary offers an SDK for Angular that can be used in Angular applications for resizing and image conversion. The SDK can also be used for delivering different image sizes on different screens. It allows for easy delivery of video and image assets from Cloudinary’s storage.

Visit Cloudinary’s website to read more about about end-to-end management of media assets. The SDK can be found here on GitHub.

10. ng2-pdf-viewer

The ng2-pdf-viewer is a library for viewing and interacting with PDFs on a web application. The library providers a component for rendering PDF documents. The component can also be used for performing operations on the selected PDF like: resizing, rotating, searching through the document, etc. You can render files locally or provide a link to an external document. This library is great for managing PDF files on your web application, and there’s a lot it can handle using directives.

Visit their official documentation page or their page on GitHub.

11. ngx-charts

When working with data in a web application, the need for data visualization arises, thus the need for a data visualization library that can handle various forms of customizations while rendering. ngx-charts is quite interesting because their charts rely mostly on using Angular to animate SVGs, which offers more speed and flexibility as the library has been optimized for use in Angular.

It also uses d3 for math functions, scales and axis, etc. It comes with ten or more color schemes while making the charts fully customizable using CSS. Visit their demo page to view the different themes and color schemes available and their GitHub page to get started with the library. The library has garnered almost 3k stars on GitHub and is actively maintained.

12. ng-seed/universal

This great library has so many features packaged within it, it should be the Swiss army knife for every Angular developer. It consists of the following packages:

  • ngx-meta: for handling meta tags, title tags and SEO enhancement.
  • ngx-cache: for managing application wide data.
  • ngx-auth: for managing jwt-based authentication.

It comes with a couple of other packages for handling server-side rendering, lazy loading, state management and webpack configurations.

Clone the repository on GitHub and follow the instructions to get started.

13. Augury

When building web applications, browser DevTools play an important part in the development process. It provides features for debugging, diagnosing and editing web applications. When dealing with Angular applications, DevTools only lets you interact with the end product of your code, which means your Angular components, directives, etc. have been converted to JavaScript, HTML and CSS.

Augury as a browser extension allows you debug and visualize your Angular application in its pre-compiled state. With Augury, you can inspect your components and ensure they’re functioning as they should. Augury works better with source maps, so ensure that you generate source maps for a better experience while using Augury.

You can download the extension for Chrome or Firefox. Visit their GitHub page if you wish to contribute or raise issues.

14. ngx-moment

Moment.js is a utility library for manipulating time (not what you think). It provides a set of functions for parsing, formatting, validating, etc. dates and time using JavaScript. ngx-moment builds on the Moment.js library, providing Angular pipes for use within components. It comes packed with pipes for the functions provided by Moment.js, thus effectively eliminating the overhead of importing the functions into every component for use.

The library is actively maintained and is relatively easy to get started with. Visit the GitHub page and run through the documentation to get started.

15. ngx pipes

Fun times when Angular.js came packed with a set of pipes for transforming data before rendering. Filters is what they were called in Angular.js. Well, for some performance reasons, more recent Angular versions don't include pipes for filtering or ordering lists. Angular pipes is a library that contains a set of useful pipes for use in your Angular project. It contains pipes for performing actions like: trimming, reversing, matching and scanning strings, plucking, shuffling and ordering Arrays.

It is well documented and easy to integrate. Getting started should be a breeze and, soon enough, you’ll start getting more done with pipes. Visit the documentation or their GitHub page to get started.

16. Angular Epic Spinners

When dealing with interactivity on a webpage, you have to think about notifying users when processes not visible to them are ongoing. When the time comes, you are required to display a loading indicator. Some sites have custom loading indicators for their application, but if you’d rather have a set of easily available spinners, then this spinners library should be your go-to.

Angular Epic Spinners is built on the epic-spinners library, with Angular components for each component available in the library. Each component can be imported as an individual module and rendered anywhere within your application. You can select from any of 20 indicators available in the library. You can view the demo page or head straight to their GitHub page.

17. Apollo Angular

GraphQL is a query language for APIs and a runtime for fulfilling queries made with data. It allows developers to request for data they need in specific areas of their application. Apollo client is a library used to consume data from GraphQL endpoints. Apollo has different client libraries for consuming data on the frontend – libraries exist for React, Angular, Vue, etc.

Apollo Angular is a client library built for Angular applications to consume GraphQL endpoints. Apollo Angular is agnostic of any router used within the application. It also supports server-side rendering. The documentation page is well written with adequate examples to help you get started.

Summary

People sometimes avoid using external libraries in their applications during development. While that’s acceptable in some instances, external libraries can help reduce development time significantly. There are a lot of libraries that might have achieved whatever you’re struggling with during development. The task is finding the right library that fits into your applications and ensuring it fulfills its purpose. Happy coding.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Web Developer Bootcamp

Angular 8 is coming

MEAN Stack Angular 8 CRUD Web Application

Angular 8 + Spring Boot 2.2: Build a CRUD App Today!