coll - Mastering Angular Reactive Forms Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases.

Mastering Angular Reactive Forms Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases. — read online for free the complete book (whole text) full work

Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "Mastering Angular Reactive Forms Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases." online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.

Light

Font size:

↓

↑

Georgia Tahoma Arial Verdana

Reset

Interval:

↓

↑

Bookmark:

Make

1234567...28

Downloading the code

bundle and coloured images:

Please follow the link to download the

Code Bundle and the Coloured Images of the book:

https://rebrand.ly/eccf8c

Errata

We take immense pride in our work at BPB Publications and follow best practices to ensure the accuracy of our content to provide with an indulging reading experience to our subscribers. Our readers are our mirrors, and we use their inputs to reflect and improve upon human errors, if any, that may have occurred during the publishing processes involved. To let us maintain the quality and help us reach out to any readers who might be having difficulties due to any unforeseen errors, please write to us at :

errata@bpbonline.com

Your support, suggestions and feedbacks are highly appreciated by the BPB Publications Family.

Did you know that BPB offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.bpbonline.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at business@bpbonline.com for more details.

At you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on BPB books and eBooks.

BPB is searching for authors like you

If you're interested in becoming an author for BPB, please visit www.bpbonline.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

The code bundle for the book is also hosted on GitHub at In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at Check them out!

PIRACY

If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at business@bpbonline.com with a link to the material.

If you are interested in becoming an author

If there is a topic that you have expertise in, and you are interested in either writing or contributing to a book, please visit

REVIEWS

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at BPB can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about BPB, please visit

Writing the FormArray validator

We will write a validator that ensures no duplicate values exist in a If a user writes more than once the same value in an array form, the system will communicate back with an error message like the following figure:

Figure 4.4: Error message of an invalid FormArray

Before we start examining the code of this example, we should mention that the given FormArray will consist of FormGroup items and will look like this:

"colors": [

{"name": "Red"},

{"name": "Green"}

]

So, without any further ado, let's see how to create a function validator for a

validator code in file custom-validators.ts

1: import {AbstractControl, FormArray, ValidatorFn} from '@angular/forms'

2:

3: export function noDuplicates(property: string): ValidatorFn {

4: return (control: AbstractControl) => {

5: const formArray = control as FormArray

6: const hasDuplicates = formArray.value

7: .map((it: any) => it[property])

8: .reduce(

9: (acc: boolean, cur: any, idx: number, arr: any[]) => {

10: const hasDups =

11: arr.slice(idx + 1)

12: .some((it: any) => it === cur) || acc

13: acc = hasDups || acc

14:

15: return acc

16: }, false)

17:

18: return hasDuplicates ? {hasDuplicates: true} : null

19: }

20:}

21:

The example code is a bit complex, but we will go through this step by step.

We want to make sure that no duplicates exist in a and to make this happen, we will iterate the array items, and we will get the value of the property of the colors array.

In line 3, we create a function that accepts one argument: the FormControl name of the corresponding FormGroup of the FormArray items. In our example, the argument will be the

In line 4, we create the inner function, which accepts an AbstractControl argument, and has the actual validation logic.

In lines 5-16, we apply the validation logic. To ensure that no duplicates exist, we develop the logic using the and the JavaScript array functions.

In line 18, we return either null if the validator is satisfied or an object otherwise.

Using the FormArray validator

When we initialize a we define the AbstractControl instances as we have already learned. We can also provide the validators using the second argument of the array method, as we see in the following code:

Form Builder's array definition

1: array(

2: controlsConfig: any[],

3: validatorOrOpts?: ValidatorFn

4: | ValidatorFn[]

5: | AbstractControlOptions

6: | null,

7: asyncValidator?: AsyncValidatorFn

8: | AsyncValidatorFn[]

9: | null

10:): FormArray

11:

The first argument (line 2) is the and it's where we define the FormControl or FormGroup instances.

The second argument (line 3) is optional, and the type is which has the following signature:

AbstractControlOptions definition

1: export declare interface AbstractControlOptions {

2: validators?: ValidatorFn | ValidatorFn[] | null;

3: asyncValidators?:AsyncValidatorFn |AsyncValidatorFn[] |null;

4: updateOn?: 'change' | 'blur' | 'submit';

5:}

Let's now see how to apply the custom validator in a

component.ts code

1: import {Component, OnInit} from '@angular/core'

2: import {FormArray, FormBuilder, FormGroup} from

'@angular/forms'

3: import {noDuplicates} from './custom-validators'

4:

5: @Component({

6: selector: 'app-root',

7: templateUrl: './app.component.html',

8: styleUrls: ['./app.component.scss'],

9:})

10: export class AppComponent implements OnInit {

11: myForm!: FormGroup

12:

13: get colors() {

14: return this.myForm.get('colors') as FormArray

15: }

16:

17: constructor(private fb: FormBuilder) {}

18:

19: ngOnInit(): void {

20: this.myForm = this.fb.group({

21: colors: this.fb.array(

22: [

23: this.getFormArrayItem('Red'),

24: this.getFormArrayItem()],

25: {

26: validators: [noDuplicates('name')]

27: }

28: ),

29: })

30: }

31:

32: private getFormArrayItem(value?: string) {

Next page

1234567...28

Light

Font size:

↓

↑

Georgia Tahoma Arial Verdana

Reset

Interval:

↓

↑

Bookmark:

Make

Similar books «Mastering Angular Reactive Forms Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases.»

Look at similar books to Mastering Angular Reactive Forms Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases.. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.

Christian Nwamba

Typescript 2.X for Angular Developers

Christoffer Noring

Architecting Angular Applications with Redux, RxJS, and NgRx

Gion Kunz

Mastering Angular Components: Build component-based user interfaces using Angular

Sukesh Marla

A Journey to Angular Development: Learn Angular Fundamentals, TypeScript, Webpack, Routing, Directives, Components, Forms, and Modules with Practical Examples

Ninja Squad

Become a ninja with Angular (v13.0.0)

Valerio De Sanctis

ASP.NET Core 5 and Angular: Full-stack web development with .NET 5 and Angular 11, 4th Edition

Chandermani Arora

Building Large-Scale Web Applications with Angular: Your one-stop guide to building scalable and production-grade Angular web apps

Seshadri

ANGULAR: up and running

Gunasundaram Rajesh

Expert Angular: build deep understanding of Angular to set you apart from the developer crowd

Frisbie

Angular 2 Cookbook

Mathieu Nayrolles

Angular Design Patterns: Implement the Gang of Four patterns in your apps with Angular

Gaurav Gupta

Mastering HTML5 Forms

Discussion, reviews of the book Mastering Angular Reactive Forms Build Solid Expertise in Reactive Forms using Form Control, Form Group, Form Array, Validators, Testing and more with Angular 12 Through Real-World Use Cases. and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.