Angular 9 Tutorial For Beginners #51- Reactive Forms - Form Array

Angular 9 Tutorial For Beginners #51 - Form Array in reactive forms In Angular, Angular tutorials form array in reactive forms In Angular, Angular form array in reactive forms In Angular, Angular 9 form array in reactive forms In Angular, Angular tutorial learn form array in reactive Forms In Angular, angular 9 form array in reactive Forms In Angular, angular get set form array from reactive Forms In Angular 6,7,8, 9, angular 8 example,

Angular 9 tutorial for beginners, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular introduction, angular version history, angular full tutorial series, best angular tutorial.

Install bootstrap angular tutorial, Learn how to install Bootstrap in Angular 9 app. In this course you will learn how to create small, medium, large applications with Angular 9 in this development tutorial.

Angular 9 Full Tutorial Playlist

[sreenuksr]

Angular 9 Tutorial For Beginners #51- Reactive Forms - Form Array

- Helps in building basic form with form elements
- for complex forms, we will need form arrays
- almost all modern applications will need us to work with form arrays
- DOM interactions in Angular Reactive Forms are implemented using the form arrays
- Adding and removing elements can be handled in an easy way by using Form Arrays
- Form Array can be group of FormControls
- Form Array can be group of FormGroups
- FormArray is 3 types - Simple,

FormArray - invalid //if any one of the formcontrol is invalid
[
FormControl - valid
FormControl - valid
FormContro- invalid
]

- FormArray
- new FormControl(),
- new FormControl()

Example:
[
{itemid:1},
{itemid:2},
{itemid:3}
]

-FormArray // most applications will have this complex forms
- FormGroup()
-FormControl()
-FormControl()

Example:

[
{itemid:1, itemName:'test1', itemdesc:'test1desc'},
{itemid:2, itemName:'test2', itemdesc:'test2desc'},
{itemid:3, itemName:'test3', itemdesc:'test3desc'},
]

checkout.component.html

<div class="container">
<h4 class="pd-2">Checkout Form - Using Reactive Forms</h4>
<form [formGroup]="checkoutform" (ngSubmit)="postdata()">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" formControlName="emailFld">
<span &&
email Address</span>
<span && Valid
email Address</span>
</div>
</div>
<div class="form-group row">
<label for="inputQuantity" class="col-sm-2
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity" formControlName="qtyFld">
<span &&
Quantity</span>
<span &&
Length Not Matched</span>
</div>
</div>
<div class="form-group row">
<label for="items" class="col-sm-2
<div class="col-sm-10" formArrayName="items">
<div *ngFor="let item of let i=index" [formGroupName]="i">
<a [routerLink] (click) ="removeItem(i)">remove</a>
<input class="form-control" type="text" formControlName="itemId" id=task{{i}}>
<input class="form-control" type="text" formControlName="itemName" id=task{{i}}>
<input class="form-control" type="text" id=task{{i}}>
<input type="checkbox" formControlName="itemDone"> Mark as done
</div>
</div>
</div>

<div class="form-group row">
<!-- <div -->
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="trmChk" formControlName="trmChk">
<label class="form-check-label" for="gridCheck1">
Agree to Terms & Conditions
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary"
<button type="submit" class="btn btn-link"
</div>
</div>
<div>valueChangeFld is : {{valueChangeFld}}</div>
</form>
</div>

checkout.component.ts

checkoutform: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.checkoutform = formBuilder.group(
{
emailFld: ['', [Validators.required, Validators.email]],
qtyFld: ['', [Validators.required, Validators.minLength(5)]],
trmChk: ['', Validators.requiredTrue],
items: this.formBuilder.array([
this.formBuilder.group({
itemId: ['1'],
itemName: ['TeleVision'],
itemDescription: ['SmartTv'],
itemDone: ['', Validators.requiredTrue]
})

])
}
)
}

[SuperToughnut]

You are one of the best Angular teachers on YouTube!

[eddyizm]

I have a form array of form groups but need to add autocomplete to them via a rest endpoint after typing a few characters. Do you have any tutorials that relate to that?

[arvindkumarchaurasia]

Good job Sir, your videos are really helpful, specially your video starting section in which u provide basic info and definition about the topic

[athirajyothishkumar]

Could you please let me know from the Angular playlist in which videos you are covering ngrx and redux. Thank you in Advance.

[rahimanmuzekir]

Hi, sir i have doubt, here we are using form array, in this we have added maxLength validation, so that this validation is applying for only one field, whenever I clicking on add button remaning fields it is validation not coming, i need some clarification on this, how can i reslove it.

[shreyasingh]

It's not finding control name something error

[SaiKiran-ipxm]

In a get call not able to map the items array in a formgroup doing it like this way any solution ? Thank you in advance

[HimmatSingh-mlre]

sir, I want to ask you that which all think you write inside constructor and which all thing inside oninit() function

[mohdshanawazahmed]

when i try to loop it shows me an error please help me out from this

Property 'items' comes from an index signature, so it must be accessed with ['items']

[theandromeda]

. I am following the tutorial from the beginning . It is really amazing tutorial I have gone through and It give me confidence that i also can learn Angular . I have one request to you Sir can I get your ppt of the entire tutorial . Please sir it's a request to you .

[umadevicrips]

Hi ji I cannot able to understand the concept formarray what can I do ... I have craeted a three fields like store name, customer name, purchase item in that purchase item I want to add the name rupee and description about the items how can create form array in these I learned form group.

[athirajyothishkumar]

I tried the Form Array in my local and its not coming up on load of the screen. On click of any of the non-array form controls in the same form, just the UI for the form array shows up with empty values. Not sure whats happening. When I am using FormArray even the setValue functions inside ngOnInit is not working.Its messing up some code i think. When I remove the FormArray everything works fine.

Component

this.checkOutForm = this.formBuilder.group({ //In FormBuilder we are creating a group of form elements
emailAddress: ['', [Validators.required,
Validators.email,
Validators.maxLength(30),
Validators.minLength(5)]], //These should be excatly same as your form
password: ['', [Validators.required]], //We can make it dynamic
saveData: ['', [Validators.requiredTrue]],
itemsArr: this.formBuilder.array([
new FormControl('B.A.P'),
new FormControl('BTS'),
new FormControl('SHINee'),
new FormControl('EXO')
])
});

Template

<div class='pb-2'></div>
<h2>Form Array</h2>
<div class="form-group row">
<div class="col-sm-10" formArrayName="itemsArr">
<div *ngFor="let item of let i = index">
<input type="text" class="form-control" formControlName="i" id=task{{i}}>
</div>
</div>
</div>

[jacksm]

how i understand it is, , a form array is like u u want to create a table with rows? where the columns are the control fields? right?

[honglam]

Can you explain this code : let i =index" [formGroupName]="i"
how does that i which equals to an index number can bind to the formControlName="itemId" ?

[humourhead]

how do you apply for loop in the form? please explaine

[prashantshinde]

(property items does not exist on type formgroup) i m unable to solve this error please help me with this

[HimmatSingh-mlre]

sir why did you use ngFor ? and please explain the code written inside ngFor
i = index ??

[francielbasan]

hi friend, im getting this message error, when i try to itterate to let item of check form it shows me Type '{ [key: string]: AbstractControl; }' is not assignable to type, how can i solve it

[bizcodes]

Somebody help me, because I feel like I missed something BIG! I am usually the biggest fan of these tutorials but this one has me quite frustrated. I've been watching the tutorials in order, but somehow there is a bunch of code that seemingly just appeared between #49 and #50 and still more between #50 & #51. I never saw a tutorial with setting up these observables (although I know how from watching your RxJS series), so I am trying to copy what I see on the video screen, but something is just not working!