Angular 9 Tutorial For Beginners #52- Reactive Forms - Add Rows Dynamically

[@sreenuksr]

Angular 9 Tutorial For Beginners #52- Reactive Forms - Add Rows Dynamically
- There will be use cases when we will not know how many rows or fields to expect
- That's when we will need to dynamically "Add Rows" to the form on the fly
- Adding new rows to form simply refers to appending/pushing the form groups or form controls to the form array at run time
- Form Array - Form Group, Form Control
component.ts
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]
})
])
}
)
}
//array name
get items() {
return this.checkoutform.get('items') as FormArray;
}
//add rows to the form
AddRow() {
const arraylength = this.items.length;
const newitem = this.formBuilder.group({
itemId: [arraylength+1],
itemName: [''],
itemDescription: [''],
itemDone: ['', Validators.requiredTrue]
});
this.items.push(newitem);
}
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
Add Row
valueChangeFld is : {{valueChangeFld}}

[@ARCTutorials]

Thanks Sreeni. Regards Sridhar

[@michaelaandrews434]

I didnt understand the part get items(). Inside the method we are getting all the values as Formarray but my doubt is can we access those values by just using "items" alone?

[@ezhilarasi2010]

Thanks sir.

[@ARCTutorials]

You are most welcome 🙏

[@johnkurywchak5427]

Hi. I noticed in the checkout.html, the ngFor loop, what does ['controls' ] mean for the items array?
*ngFor="let item of checkoutForm.controls.items['controls'];

[@ARCTutorials]

Hi John. Controls are the form controls when we are doing dynamic forms. Each control refers to an array of elements inside the form row. A lot of folks are asking to cover more details on reactive forms. I think its a good idea to do a dedicated session on reactive forms. what say?

[@johnkurywchak5427]

@@ARCTutorials Thanks for the reply. I think another session with a full fledged form design would be good to see how to do a reactive form from start to end.

[@ARCTutorials]

You got it 👍

[@vivekrampelly6435]

@@ARCTutorials yes do it sir

[@vikaswin123]

Tutorials are really good , in details and will make the learner expert.

[@ARCTutorials]

Thanks Vikas for your kind words and encouragement

[@henimex]

where can i find a template just like on 3:14 I'm not good at HTML designing

[@pavansai7555]

Sir I want to know how to select row of an dynamic array manually or how to use radio button in dynamic grid

[@ARCTutorials]

Hi Pavan. I have created an exclusive new tutorial in Angular 10 series. Please refer it - it will make it very clear. ruclips.net/video/Xz1SydcAQMA/видео.html

[@RahulKumar-vb5nh]

can you make a video on ng prime table with picklist in row button dropdown with add edit

[@anandparmar5068]

good evening sir,
are you provide live project training. i am interested.

[@priyakumar1176]

Sir I want to add a row in second page if first page submission is successful.Each row should have its default name(eg-report1,report2 so on),start date,end date, drop down. if value in dropdown changes dynamically by user in each row ,other fields of a row should get updated accordingly with start date as dropdown value change date.how to create a dynamic row creation with dropdown and how to display new values on dropdown selection in each row.can u please let me know.I got struck here

[@ssrinathsri1]

Hi sir ..One of great Tutorial and i am looking for dynamic form with post and get method services sir ..

[@ARCTutorials]

Hi Srinath. I am soon going to start Angular CRUD with reactive forms soon. Thanks Sridhar

[@niltalv]

Good video, Greetings from Colombia

[@ARCTutorials]

Glad you enjoyed!

[@jacksm8709]

hie is it possible to add/remove buttons dynamically?

[@ARCTutorials]

Yes thats covered in next episode jacks. Please check it out

[@jacksm8709]

@@ARCTutorials next episode or tutorial?

[@ARCTutorials]

Next tutotial which is removing rows from from array. Pls check the playlist

[@jacksm8709]

@@ARCTutorials i was able to add buttons but it has an error "ERROR Error: No value accessor for form control with path: 'SeatsArray -> 1 -> Seat'" this is my code for HTML:


Seat No {{i}}

and my js.
export class MyFormComponent implements OnInit {
clientForm: FormGroup;
constructor(private formBuilder: FormBuilder,) {

// create the form
this.clientForm = this.formBuilder.group({
Passenger: ['James Mwangi'],
SeatsArray: this.formBuilder.array([
this.formBuilder.group({
Seat: ['SeatNo1']
})
])
})
}
get Seats() {
return this.clientForm.get("SeatsArray") as FormArray;
}
addbuttons() {
const arraylength = this.Seats.length;
console.log(arraylength)
const newSeat = this.formBuilder.group({
Seat: [arraylength + 1]
})
this.Seats.push(newSeat)
}
ngOnInit(): void {
}
}

[@ARCTutorials]

Hi Jacks. Sorry was extremely busy today so could not work on your code. Will look into first thing. Apologies for the delayed response. Regards Sridhar

[@subhammalgope5677]

How do i add row dynamically on DEVEXPRESS angular in a popup editing form

[@ARCTutorials]

Hi Shubham I have covered dyanmic examples in Angular 10 series with new examples. Pls check it out ruclips.net/video/Fg4spR6cdBQ/видео.html

[@girishchandrabarik3554]

hello sir, if possible remove ad video from the videos after every 3 to 4 minutes it shows and some add also displays on the video screen.

[@pcoderajap2913]

I have realised that newly added elements don't have spaces in between them, how do u make sure there is space?

[@ARCTutorials]

By adding classes like "p-4" to the newly added row. Try it out please and let me know

[@ashutoshpatra440]

Sir i want to add row for a particular input field ....i facing difficulty....

[@ARCTutorials]

Hi Ashutosh. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning ruclips.net/video/oEO0KzY1ipg/видео.html

[@ashutoshpatra440]

@@ARCTutorials yes sir

[@girishchandrabarik3554]

but in this case while adding new row dynamically we are getting the same field but if we want diffrent then what to do.. on that case it fails

[@ARCTutorials]

Hi Girish. I have created Reactive Forms tutorial from scratch in Angular 10 series. Please check it out tomorrow

[@girishchandrabarik3554]

@@ARCTutorials ok

[@jacksm8709]

woooo this is good stuff.. cant wait to play with it... thanks man as usual u make things look simple..

[@ARCTutorials]

Glad u like the video. Keep building buddy. Regards Sridhar

[@saurabhmore5164]

Property 'controls' does not exist on type 'AbstractControl'.

[@ARCTutorials]

Hi Saurabh. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning ruclips.net/video/oEO0KzY1ipg/видео.html

[@rubinaanjum4750]

Hii.. how to add dynamic forms?

[@saurabhmore5164]

Can I get a code of this tutorial ?

[@vignesh7438]

Hii bro... Could you give that invoice code for my reference, because its difficult to built that code??

[@ARCTutorials]

Hi Vignesh. Please send email at [e-mail]

[@vignesh7438]

@@ARCTutorials sure bro.. Thanks a lot

[@ponranjith2683]

Sir can u share ur insta id

[@TheGaurav0084]

can i get code for the invoice form you showed @3:15

[@ARCTutorials]

Hi Gaurav. Sure. I am going to create a mini-series on Reactive Forms from scratch to build the invoice form. Stay tuned for the same. Regards Sridhar

[@TheGaurav0084]

@@ARCTutorials eagerly waiting :)

[@MrFuture-96]

Thank you so much sir for each great video. I wish I could work for you someday to spend time in such a great Team of yours and I am proud of you saying, my Teacher :)

[@praveeneliezer9682]

How would you add multiple rows in an added row dynamically? For example; we can add subfolders in a folder. #Nested

[@ARCTutorials]

Hi Praveen. I have covered that also in detail in the next episode. Please check and let me know. Thanks Sridhar

[@praveeneliezer9682]

Hi Sridhar, I watched episode 53 as well but did not find you adding rows INSIDE added rows. We are here trying to create set of multiple addresses as we all see in contacts. There is a + button and you can create multiple addresses where you find few ready made rows. I don’t want to show multiple ready made rows, but I wish to give another add button to add the rows at will to suffice the need of multiple areas & landmarks within the same address set.

[@ARCTutorials]

@@praveeneliezer9682 Hi Praveen. I will cover these in detail with multiple combinations in new Angular CRUD tutorial series with Reactive Forms

[@praveeneliezer9682]

Would be great if you could just help with the codes as we are trying to do this in our current project.