Merge pull request #1575 from GSA/formly-button-styles

Formly button class configurable and updated input behavior
GSA · Jan 6, 2025 · cf4acc6 · cf4acc6
2 parents 6501d79 + 06e9f95
commit cf4acc6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/libs/documentation/src/lib/storybook/formly/custom/formly-forms/formly-forms.component.ts b/libs/documentation/src/lib/storybook/formly/custom/formly-forms/formly-forms.component.ts
@@ -57,7 +57,7 @@ export class FormlyFormsComponent {
             btnIcon: 'plus-circle',
             additionalField: this.street2AddressField,
             text: 'Street Address 2 (Optional)',
-            btnType: 'info',
+            btnClass: 'usa-button--unstyled margin-top-neg-1',
           },
         },
       ],

diff --git a/libs/packages/sam-formly/src/lib/formly/types/button.ts b/libs/packages/sam-formly/src/lib/formly/types/button.ts
@@ -7,7 +7,8 @@ import { FieldType, FieldTypeConfig, FormlyFieldConfig, FormlyFormBuilder } from
   template: `
     <button
       *ngIf="!hideButton && !additionalField"
-      class="usa-button usa-button--unstyled margin-top-neg-1"
+      class="usa-button"
+      [ngClass]="props.btnClass"
       (click)="onClick($event)"
       [attr.aria-label]="props.text"
     >
@@ -28,6 +29,14 @@ export class FormlyFieldButtonComponent extends FieldType<FieldTypeConfig> {
     super();
   }
 
+  ngOnInit(){
+   if( this.props.additionalField && this.model[this.props.additionalField.key] && this.props.enableInput) {
+    this.hideButton = true;
+    this.additionalField = this.props.additionalField;
+    this.formBuilder.buildForm(this.form as FormGroup, [this.additionalField], this.model, this.options);
+   }
+  }
+
   onClick($event) {
     if (this.props.enableInput) {
       if (this.additionalField) {