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

[@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 Checkout Form - Using Reactive Forms Email Enter email Address Enter Valid email Address Quantity Enter Quantity Minmum Length Not Matched Items remove Mark as done Agree to Terms & Conditions Checkout Clear valueChangeFld is : {{valueChangeFld}} 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] }) ]) } ) }

[@ARCTutorials]

Thanks Sreeni

[@SuperToughnut]

You are one of the best Angular teachers on KZbin!

[@ARCTutorials]

Thank you so much for your kind words

[@arvindkumarchaurasia8237]

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

[@ARCTutorials]

Thank you Arvind for your kind words and support

[@HimmatSingh-ml1re]

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

[@ARCTutorials]

Good question. I will cover this in detail in CRUD series as part of components. I will cover component life cycle in detail.

[@Manishkumar-pl5kt]

whEn you have to update the old value to new value so write under ngOnInit(), i mean update data you will get

[@rahimanmuzekir4590]

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.

[@SaiKiran-ip3xm]

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

[@ARCTutorials]

Can you please share little bit more about the kind of error you are seeing?

[@athirajyothishkumar6933]

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

[@ARCTutorials]

Hi Athira. I will be covering ngrx and redux in the next series. Thanks Sridhar

[@IqbalAhmed-qk5ix]

Nice Explain Thank u so much

[@ARCTutorials]

You are most welcome Iqbal 👍

[@MohamedAhmed-xg3bg]

I have error sir please help me. Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?

[@ARCTutorials]

Hi Mohamed. I am going to cover this again in detail in Angular 10 series. Please follow along, just starting Angular forms. kzbin.info/www/bejne/fJiXpKOIa8iXeLM

[@PratyushMishra7]

go to tsconfig.json and put "noImplicitAny":false

[@bhuvneshkumar08]

@@PratyushMishra7 code compile ho jata h par output nai a rha h

[@athirajyothishkumar6933]

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 --------------- Form Array

[@ARCTutorials]

I will cover this again in a full fledge example

[@user-zy5ig3ux7s]

i am getting an error at Error: src/app/pages/account/profile/profile.component.html(47,42): Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call '_decl0_48.loginForm.controls.addressPanel.get'? Please suggest

[@MohamedAhmed-xg3bg]

I have the same problem, do you find solution of this problem?

[@PratyushMishra7]

@@MohamedAhmed-xg3bg same problem bro

[@mdhussain9645]

I am also facing the same issue...@arc tutorial Please help us to resolve the issue

[@shravanvishwakarma3019]

hi sridhar, if i want to get only one value from formarray in console, how can i do that?

[@ARCTutorials]

Hi Shravan. Since its an array, to get the first value you will have to use index of 0 to fetch the first value

[@shravanvishwakarma3019]

Thanks for the reply sir, One more question please sir, I have to add more fields in array Suppose if array fields have date field then if the the users enter date below 18 then one field automatically generated there and if not below 18 then field should not be added, Please reply sir your one reply save my project, thanks in advanced

[@HimmatSingh-ml1re]

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

[@ARCTutorials]

ngFor is for looping the array items. i is used as a tracker for the loop

[@saikumarmogilla450]

hi, what is the use of id="task{{i}}" in the template, please explain sir, thx in advance

[@ARCTutorials]

I am using the value of i so I can create unique and dynamic id for the elements

[@mohammadikram687]

@@ARCTutorials I was also having this doubt but now I know. Thanks, Sir.

[@ashokaj4110]

I is just an index like 0 1 2, my question is how are we mapping i to [formGroupName], it looks like a parameter binding where i should be the value from the component, i did not understand this. Kindly help me with it

[@ARCTutorials]

Hi Ashoka. I have created a brand new Angular 10 series and I have exapliend Form Array in detail. Please check this out and I am sure it will help you a lot. kzbin.info/www/bejne/iprLgqOKi7F4g8k

[@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?

[@hadamakebe4991]

thank you for tuto

[@SurajKumar-cg1mm]

Halo sir Can you please share me any project that was based on angular or nodejs or any github link for the project thank you

[@ARCTutorials]

Hi Suraj. We will soon be starting an entire Angular 10 project from scratch. Please stay tuned and watch out

[@mohdshanawazahmed526]

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']

[@humourhead6108]

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

[@francielbasan3753]

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 'NgIterable'. , how can i solve it

[@theandromeda7382]

. 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 .

[@ARCTutorials]

Hi Buddy. Sure. Please drop me a note and I will share the notes with you

[@jacksm8709]

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?

[@ARCTutorials]

Not columns. Think of it as rows. Each row is a form group. A row is collection of columns. Columns here will be like form control

[@kundanchaurasia32]

sir can your please share angular complete notes

[@umadevicrips7888]

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.

[@bizcodes8508]

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!

[@prashantshinde6850]

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

[@honglam4492]

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" ?

[@hassanmarji3147]

index is a property whitin the *ngFor structure control. Is the same value as the i within a normal for loop, which is the index

[@shivangijain9181]

Error: src/app/checkout/checkout.component.html:24:32 - error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'? 24 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/checkout/checkout.component.ts:6:16 6 templateUrl: './checkout.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component CheckoutComponent. Please rectify this error for me.

[@shreyasingh5057]

It's not finding control name something error

[@mp-fg2zw]

Hi Sridhar, kindly help me in understand this.here in the program you have mentioned the below line. Here what is task here? can't we just keep id="i" or id={{i}}

[@ARCTutorials]

In order to uniquely identify the element im adding the string literal "task" - it has no meaning. You can append anything instead of task. We can what you suggested, but just giving numbers wont do much help. To uniquely identify elements give some name and add the "i" to it.

[@mp-fg2zw]

@@ARCTutorials thank you for clarifying sir.

[@gvinay1988]

Sir can u plz make ur all video add free it diverts Mind......if possible plz do that

[@ARCTutorials]

Hi Vinay. Ads are the only way I get paid little for all my efforts. Hope you understand

[@gvinay1988]

@@ARCTutorials OK sir no issue

[@umadevicrips7888]

What can I do

[@surajjare4466]

Hi Shridhar, I am building angular app which design the survey but for designing the survey we have to select no of questions,type of question ie.Single line,multiple choice, numeric and after submit survey will be created and one link will be created by using that link others can take survey...for back end I am using spring boot...please help me how to can I dynamically create survey and create its link

[@ARCTutorials]

For dynamically generated forms you have to implement the structure using the reactive forms. I will try and create a quick tutorial on Reactive Forms

[@surajjare4466]

@@ARCTutorials Thank you sir....It will be great

[@umadevicrips7888]

Hi ji I have developed these formArray it's error of cannot find control with name :'0'

[@LOLMAN22]

this is great, you should make udemy courses haha

[@iftikharhussain1823]

Sir, I am facing this error ERROR Error: Cannot find control with path: 'items -> i'

[@iftikharhussain1823]

Solved it I made mistake in HTML, I wrote formGroupName="i". the correct form was [formGroupName]="i"

[@ARCTutorials]

Good Luck!!! Happy Learning

[@koyenadutta5747]

sound is too low

[@vinjamuripavankumar9833]

Explain the code you write in HTML page i.e is *ngFor code you write plz explain properly

[@pushkardevi733]

right ...! plz explain HTML code *ngFor properly

[@swapnilsutar2498]

Plz provide git hub link

[@pushkardevi733]

In this video i am not getting anything, it's very complex to understand

[@ARCTutorials]

Hi Pushkar. My apologies if the video did not clear your doubts. Can you pls list your queries and send me email at [e-mail] and I will cover it as part of Angular 10 series that I am running now. Please do follow Angular 10 as I will cover them in much more details.

[@chaitanyaa7953]

Hello Sir, This is the error i am getting, can you help me out Error: src/app/checkout/checkout.component.html:22:56 - error TS4111: Property 'items' comes from an index signature, so it must be accessed with ['items']. 22

[@francielbasan3753]

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 'NgIterable'. , how can i solve it