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>