Accordian Forms

This Material is an expansion panel that allows you to project any component form.

The result is a form array of all the form groups created. You can add/delete of update any expansion panel content.

The component also can take a data structure and create the panels with the projected for along with patching the data.

You can also move panels around with drag and drop.

Intsallation

npm install accordian-forms

Selector

<wav-accordian-forms></wav-accordian-forms>

Inputs

The following Inputs are available [data]="info" [formObject]="myForm" [controls]="false" [hideToggle]="false" [multi]="false"

Input	Type	Defaut	Description
data	ANY[]	[]	data for form array of form groups
formObject	FormGroup	NULL	form group for projected component form
controls	BOOLEAN	NULL	controls to add/delete panel
hideToggle	BOOLEAN	false	display toggle on panel
multi	BOOLEAN	false	open multiple panels

Setup

Define the form group for the component being injected that will be replicated in the expansion panel

myForm = this.fb.group({
  name: this.fb.group({
    first: [null, Validators.required],
    last: [null, Validators.required]
  }),
  address: this.fb.group({
    street: [null],
    location: this.fb.group({
      country: [null],
      region: [null],
      city: [null]
    })
  })
})

Define the data to be patched to the form

info = [
  {
    name: { first: 'Jimmy', last: 'Smith'},
    address: {
      street: '12 Baker Street',
      location: {
        country: 'Canada', region: 'Vancover', city: 'Unknown'
      }
    }
  },
  {
    name: { first: 'Jake', last: 'Smith'},
    address: {
      street: '6 Kermit Road',
      location: {
        country: 'Canada', region: 'Vancover', city: 'Unknown'
      }
    }
  }
]

Place the component and define any inputs.

[data] is your data to patch the form with

[formObject] is your form to replicate in the panel

Now your ready to define the component

<div>
  <wav-accordian-forms
    [data]="info"
    [formObject]="myForm"
    [controls]="false"
    [hideToggle]="false"
    [multi]="false"
    #expansion_panel
  >
  <!-- Form Component to Project -->
    <ng-template let-row #formTemplateRef>
      <app-general-info [rowForm]="row"></app-general-info>
    </ng-template>

  </wav-accordian-forms>
</div>

in the component tags you will use the ng-template which will replicate the component (form) We create a reference formTemplateRef to access any events - in this case we aew using Add and Clear buttons outside this component to execute these functions inside the accordian-form component. We will use a viewChild get connect this and the following functions.

@ViewChild('expansion_panel', { static: false }) expansion_panel: AccordianFormsComponent

add() {
  this.expansion_panel.appendObject()
}

clear() {
  this.expansion_panel.clearObjects()
}

Now we add our component that has the form. [rowForm] is the input value of the form group that will be injected into the component form.

<app-general-info [rowForm]="row"></app-general-info>

Here is a sample of the event we wish to call from outside of this compoenent using the viewChild to connect the event.

<!-- append a new form group panel -->
<div style="margin-bottom: 16px; padding: 8px;">
  <div style="padding: 8px;"><h1>Sample Controls</h1></div>
  <div fxFlex></div>
  <button mat-icon-button style="margin-top: 8px;" (click)="add()">
    <mat-icon>add</mat-icon>
  </button>
</div>

<!-- clear -->
<div style="padding: 16px;">
  <button mat-stroked-button (click)="clear()">Clear All</button>
</div>