What's new

Designing complex UI using reactive forms angular 8


Active member
Staff member
Screen Layout

I am trying to develop screen similar to above image, Loaded first time UI will look like above, when user clicks ADD then 4 new input fields will be added to new page. So basically below part is paginated user can go next page or back to previous.


this.mainform = this._formbuilder.group({
charges: this._formbuilder.array([])

charges is a model class with two properties,

class charges {

in maincomponent html

<div [formgroup]="mainform">
<chargesscreen [chargesdata]="data"></chargesscreen>

data is array of charges objects. I have just passed 4 empty objects in array.

chargesscreen component -- this is where it iterates over the charges array

@Input chargesdata;


<div formArrayName="chargesdata" *ngFor"let item of chargesdata.controls; let i = index">
<div [formgroupname]="i">
//displayed components

controls are displayed but in console i am getting an error, formArrayName must be used with parent form directive

and also i would like to know the approach of handling pagination, when i click on add new 4 rows will be displayed. Thanks for your help.

Continue reading...