What's new

Designing complex UI using reactive forms angular 8

Fever

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.

mainscreencomponent

this.mainform = this._formbuilder.group({
company:[''],
charges: this._formbuilder.array([])
})


charges is a model class with two properties,

class charges {
type1;
type2;
}


in maincomponent html

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


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;

chargesscreen.html

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


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