Formly button type is updated to support to add field dynamically

libs/documentation/src/lib/storybook/formly/custom/formly-forms/formly-forms.component.ts

@@ -10,35 +10,27 @@ export class FormlyFormsComponent {
   form = new FormGroup({});
   model: any = {};
   options: any = null;
-  fields: FormlyFieldConfig[] = [
-    {
-      fieldGroupClassName: 'grid-row',
-      fieldGroup: [
-        {
-          template:
-            '<h3>Physical Address</h3><span>Your physical address is the street address of the primary office or other building where your entity is located. A post office box may not be used as your physical…</span>',
-        },
-      ],
+
+  street2AddressField = {
+    key: 'street2',
+    type: 'input',
+    focus: true,
+    props: {
+      label: 'Address Street2',
+      placeholder: '',
     },
+  };
+
+  fields: FormlyFieldConfig[] = [
     {
       fieldGroupClassName: 'grid-row',
       fieldGroup: [
         {
-          className: 'grid-col-7',
-          key: 'country',
-          type: 'select',
-          defaultValue: 'united_states',
-          props: {
-            label: 'Country',
-            required: true,
-            options: [
-              { label: 'United States (USA)', value: 'united_states' },
-              { label: 'Canada', value: 'canada' },
-            ],
-          },
+          template: `<h3>Physical Address</h3><span class="padding-top-1">Where does your organization conduct business? Use an address you can document with your legal business name.</span>`,
         },
       ],
     },
+
     {
       fieldGroupClassName: 'grid-row',
       fieldGroup: [
@@ -53,19 +45,24 @@ export class FormlyFormsComponent {
         },
       ],
     },
+
     {
-      fieldGroupClassName: 'grid-row ',
+      fieldGroupClassName: 'grid-row',
       fieldGroup: [
         {
-          className: 'grid-col-12 tablet:grid-col-12',
-          type: 'input',
-          key: 'street2',
+          className: 'desktop:grid-col-12 tablet:grid-col-12',
+          type: 'button',
           props: {
-            label: 'Street Address 2',
+            enableInput: true,
+            btnIcon: 'plus-circle',
+            additionalField: this.street2AddressField,
+            text: 'Street Address 2 (Optional)',
+            btnType: 'info',
           },
         },
       ],
     },
+
     {
       fieldGroupClassName: 'grid-row',
       fieldGroup: [
@@ -85,29 +82,12 @@ export class FormlyFormsComponent {
         },
       ],
     },
-    {
-      fieldGroupClassName: 'grid-row',
-      fieldGroup: [
-        {
-          className: 'grid-col-4',
-          type: 'input',
-          key: 'postal',
-          hideExpression: (model) => this.model.country === 'united_states',
-          props: {
-            required: true,
-            label: 'Postal Code',
-            maxLength: 6,
-            min: 0,
-            pattern: '\\d{5}',
-          },
-        },
-      ],
-    },
+
     {
       fieldGroupClassName: 'grid-row grid-gap-2',
       fieldGroup: [
         {
-          className: 'grid-col-8',
+          className: 'grid-col-4',
           type: 'input',
           key: 'cityName',
           props: {
@@ -186,7 +166,7 @@ export class FormlyFormsComponent {
           key: 'province',
           hideExpression: (model) => this.model.country === 'united_states',
           props: {
-            label: 'State/Province',
+            label: 'State/Territory',
             required: true,
             options: [
               { id: '1', label: 'Alberta', value: 'Alberta' },
@@ -208,94 +188,21 @@ export class FormlyFormsComponent {
       fieldGroupClassName: 'grid-row',
       fieldGroup: [
         {
-          className: 'grid-col-4',
-          type: 'input',
-          key: 'congressional_district',
-          hideExpression: (model) => this.model.country === 'canada',
-          props: {
-            required: true,
-            label: 'Congressional District',
-          },
-        },
-      ],
-    },
-    {
-      fieldGroupClassName: 'grid-row',
-      fieldGroup: [
-        {
-          template: '<h3>Phone Number</h3> Your phone number is the primary number associated with your vendor',
-        },
-      ],
-    },
-    {
-      fieldGroupClassName: 'grid-row grid-gap-2',
-      fieldGroup: [
-        {
-          className: 'grid-col-12 tablet:grid-col-4 desktop:grid-col-3',
-          type: 'input',
-          key: 'Code',
-          props: {
-            label: 'Country Code',
-            required: true,
-            type: 'number',
-            pattern: '\\d{3}',
-            placeholder: 'ex-123',
-          },
-        },
-        {
-          className: 'grid-col-12 tablet:grid-col-7 desktop:grid-col-5',
-          type: 'input',
-          key: 'phone',
+          className: 'grid-col-7',
+          key: 'country',
+          type: 'select',
+          defaultValue: 'united_states',
           props: {
-            label: 'Phone',
+            label: 'Country',
             required: true,
-            type: 'number',
-            pattern: '\\d{9}',
-            placeholder: 'ex-123456789',
-          },
-        },
-        {
-          className: 'margin-bottom-0 grid-col-3 desktop:grid-col-4 display-none desktop:display-inline-block',
-          type: 'input',
-          key: 'extension',
-          props: {
-            label: 'Extension',
-            type: 'number',
-            pattern: '\\d{3}',
-            placeholder: 'ex-123',
+            options: [
+              { label: 'United States (USA)', value: 'united_states' },
+              { label: 'Canada', value: 'canada' },
+            ],
           },
         },
       ],
     },
-    {
-      className: ' margin-top-(-1) grid-col-8 display-block desktop:display-none',
-      type: 'button',
-      hideExpression: (model) => this.model.showExtension,
-      props: {
-        type: 'button',
-        text: 'Show Extension',
-        btnType: 'info',
-        onClick: ($event) => {
-          $event.preventDefault();
-          this.model.showExtension = 'show';
-          return false;
-        },
-      },
-    },
-    {
-      className: 'margin-top-(-1) grid-col-8 display-block desktop:display-none',
-      type: 'input',
-      key: 'extension1',
-      hideExpression: (model) => !this.model.showExtension,
-      props: {
-        label: 'Extension',
-        type: 'number',
-        max: 99999,
-        min: 0,
-        pattern: '\\d{3}',
-        placeholder: 'ex-123',
-      },
-    },
   ];
 
   submit() {

libs/documentation/src/lib/storybook/formly/custom/formly-forms/formly-forms.module.ts

@@ -4,9 +4,19 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { FormlyFormsComponent } from './formly-forms.component';
 import { SdsFormlyModule } from '@gsa-sam/sam-formly';
+import { IconModule } from '@gsa-sam/ngx-uswds-icons';
+import { NgxBootstrapIconsModule, plusCircle } from 'ngx-bootstrap-icons';
 
 @NgModule({
-  imports: [CommonModule, ReactiveFormsModule, SdsFormlyModule, FormsModule, FormlyModule.forRoot()],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    SdsFormlyModule,
+    FormsModule,
+    FormlyModule.forRoot(),
+    IconModule,
+    NgxBootstrapIconsModule.pick({ plusCircle }),
+  ],
   declarations: [FormlyFormsComponent],
   exports: [FormlyFormsComponent],
   bootstrap: [FormlyFormsComponent],

libs/packages/sam-formly/src/lib/formly/formly.module.ts

@@ -187,6 +187,7 @@ export const DATE_FORMAT: MatDateFormats = {
       arrowClockwise,
       chevronDown,
       infoCircleFill,
+
       calendar,
       x,
     }),

libs/packages/sam-formly/src/lib/formly/types/button.ts

@@ -1,21 +1,43 @@
 import { Component } from '@angular/core';
-import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
+import { FormGroup } from '@angular/forms';
+import { FieldType, FieldTypeConfig, FormlyFieldConfig, FormlyFormBuilder } from '@ngx-formly/core';
 
 @Component({
   selector: 'sds-formly-field-button',
   template: `
     <button
-      [type]="props.type"
-      [ngClass]="'btn btn-' + props.btnType"
+      *ngIf="!hideButton && !additionalField"
+      class="usa-button usa-button--unstyled margin-top-neg-1"
       (click)="onClick($event)"
-      class="usa-button--unstyled"
+      [attr.aria-label]="props.text"
     >
+      <usa-icon *ngIf="props.btnIcon" [icon]="props.btnIcon" [size]="'s'"></usa-icon>
       {{ props.text }}
     </button>
+
+    <ng-container *ngIf="additionalField">
+      <formly-field class="margin-top-0" [field]="additionalField"></formly-field>
+    </ng-container>
   `,
 })
 export class FormlyFieldButtonComponent extends FieldType<FieldTypeConfig> {
+  additionalField: FormlyFieldConfig | null = null;
+  hideButton = false;
+
+  constructor(private formBuilder: FormlyFormBuilder) {
+    super();
+  }
+
   onClick($event) {
+    if (this.props.enableInput) {
+      if (this.additionalField) {
+        return;
+      }
+      this.additionalField = this.props.additionalField;
+      this.hideButton = true;
+      this.formBuilder.buildForm(this.form as FormGroup, [this.additionalField], this.model, this.options);
+    }
+
     if (this.props.onClick) {
       this.props.onClick($event);
     }