Need guidance: How to use Angular Reactive forms in Storybook ? (FormGroup / FormArray / FormControl)

[cuznerdexter]

I am working on an Angular12 App (using NX, Storybook, Cypress, Jest & KendoUI).
It is a complex app with many unique reactive form based components.
I am stuck building Stories for any component that uses Reactive Form modules.

Even a basic reactive form with only 1 FormGroup and 1 FormControl breaks in my stories.
Can someone please advise how to use Reactive Forms in Storybook ? or is there a good tutorial ? (I have not found one so far).

Here is some example code to explain:

//// Part of the Story file
export default {
  title: 'ARNotesComponent',
  component: ARNotesComponent,
  decorators: [
    moduleMetadata({
      imports: [  ReactiveFormsModule ],
      declarations: [ARNotesComponent ],
      providers: [ ]
    })
  ],
} as Meta<ARNotesComponent>;

const Template: Story<ARNotesComponent> = (args: ARNotesComponent) => ({
  props: {
    commentsForm: new FormGroup({}),
    actionEntryForm: new FormGroup({}),
    ...args
  }
});

export const NotesWithText = Template.bind({});
NotesWithText.args = {
    commentsForm: new FormGroup({
        comments: new FormControl('Some simple input here ...')
    })

}

//// The Component
export class ARNotesComponent implements OnInit, OnDestroy {

  @Input() root: FormGroup;

  commentsForm: FormGroup;

  constructor() {
  }

  ngOnInit() {
    this.commentsForm = new FormGroup({
      'comments': new FormControl('')
    });
    this.root.addControl('commentsForm', this.commentsForm );
  }

//// The Component Template
<div class="d-flex top-container" [formGroup]="commentsForm">
  <div class="d-flex justify-content-end full-width notes-section">
      <kendo-textarea resizable="auto" formControlName="comments"></kendo-textarea>
  </div>
</div>

[agniAZ]

@cuznerdexter unfortunately I do not have any solution or good news for you :P but am in a same situation as you are. So I wanted to ask wether you have managed to solve the puzzle?

[hughesadam87]

Is this new to Angular12 or something? Surprised to see this only being reported in 2021, as I'd imagine many angular users would have this case.

[agniAZ]

@hugadams I cannot give you the answer wether it is ng12 specifically related or not, but just today I upgraded my lib to ng13 and it seems there are more problems coming in, but this time it is not Form related, but overall config, build and run of the Storybook - will probably be fixed in some time - if interested check out - #17039

The example I posted above is using FormGroups as an @input so you might use it and tailor it to your needs :)

[santoshNice]

Thanks! The solution woke me up a bit. Here is what works for me in a simpler use case. Basically, each story is a function. So, we can just write some logics in the function before returning the story object itself.

Remember to import whichever form module you are using though at the moduleMetadata section

export default {
  title: 'Controls/Date Range Picker',
  component: DateRangePickerComponent,
  decorators: [
    moduleMetadata({
      imports: [
        DateRangePickerModule,
        NoopAnimationsModule,
        ReactiveFormsModule, // <--------- **This is important**
      ],
    }),
  ],
} as Meta<DateRangePickerComponent>;

const FormControlTemplate: Story<DateRangePickerComponent> = (args: DateRangePickerComponent) => {
  const formGroup = new FormGroup({
    dateRange: new FormControl(undefined),
  });

  const getDateString = (date) => {
    return JSON.stringify(date);
  };

  return {
    component: DateRangePickerComponent,
    template: `
      <form [formGroup]="form">
        <app-date-range-picker 
          formControlName="dateRange"
          appDateRangePickerValueAccessor
        >
        </app-date-range-picker>
      </form>
  
      <div style="margin-top: 20px">
        <p style="white-space: pre">Value: {{getDateString(form.value)}}</p>
      </div>
    `,
    props: {
      ...args,
      form: formGroup,
      getDateString,
    },
  }
};

export const Form = FormControlTemplate.bind({});
Form.args = {};

Hi @DriLLFreAK100, could you please tell me which storybook version did you use?

[AdditionAddict]

santonice's solution still works "@storybook/angular": "~6.5.9", "@nrwl/angular": "15.0.13",

[manng2]

DriLLFreAK100's solution still works "@storybook": "~7.0.0"

[thayna-oliveira]

Is it possible to use formcontrol in a MDX file?

[agniAZ]

@thayna-oliveira hopefully this will help you

<!--- storybook stuff -->

import {Meta, Story} from '@storybook/addon-docs'
import {moduleMetadata} from '@storybook/angular';

<!--- my own components with smoothForm being smart -->

import {SmoothFormComponent} from '../projects/smoothie';
import {SmoothInputComponent} from '../projects/smoothie/form/smooth-input';
import {SmoothButtonComponent} from '../projects/smoothie';

<!--- ng form stuff -->

import {FormGroup, FormControl, ReactiveFormsModule, Validators} from '@angular/forms';

<Meta title='ng form' decorators={[
  moduleMetadata({
    declarations: [SmoothFormComponent, SmoothInputComponent, SmoothButtonComponent],
    imports: [ReactiveFormsModule]})
]} />

# MDX story - Angular form showcase

  <Story name='ng form'>{{
  template: `
      <smooth-form
      [formName]="form"
      [config]="config"
        >
       </smooth-form>
  `,
<!--- most important part, quite simple, lost only 2 hours on it :D -->
  props: {
    form: new FormGroup({
      control0: new FormControl(
        '', [
          Validators.required,])
    }),
    config: [
      {
        input: {
          controlName: 'control0',
          readonly: false,
          placeholder: 'Storybook form input',
          name: 'control0'
        },
        validationCheck: true,
        validation:
          {
            required: 'This field is required'
          },
        descriptionCheck: true,
        description:
          {
            text: 'Explanation text',
            notif: true,
          }
      },
    ]
  }
}}</Story>

[thayna-oliveira]

Thank you @agniAZ! You saved my life, really! So many hours I lost trying to configure it, thank you kindly!!!

[agniAZ]

@thayna-oliveira no problem, was a good exercise for me as well!

out of curiosity, why choose .mdx instead of .ts? :)

[thayna-oliveira]

I choose .mdx because I need to show documentation/guidelines from design with my components and I found .mdx easier to write them

[barbertoclean21]

No trying get paid for what they want the dee or a job want me to do on them or they need help doing o what I saying

[alanrichards86]

I am running into the same issue but don't seem to be able to get @DriLLFreAK100 solution to work.

The component I am writing the story for is fairly complex and uses the NgxmatSelectSearchModule as well. Im curious if that might be causing my issues but the console.error, which is the same as the original posters, does not seem to point to it.
Here is my story setup atm. Any thoughts? Let me know if you need any other info. Thanks for any help provided.

Error:

Converting circular structure to JSON
    --> starting at object with constructor 'FormGroup'
    |     property 'controls' -> object with constructor 'Object'
    |     property 'test' -> object with constructor 'FormControl'

// MyComponent.stories.ts
export default {
  title: 'Material/Components/MatSelectSearchComponent',
  component: MatSelectSearchComponent,
  decorators: [
    moduleMetadata({
      imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        NgxMatSelectSearchModule,
        MatSelectModule,
        MatFormFieldModule,
        MatOptionModule,
        MatCheckboxModule,
        MatDividerModule,
        BrowserAnimationsModule
      ],
    }),
  ],
} as Meta<MatSelectSearchComponent>;

const Template: Story<MatSelectSearchComponent> = (
  args: MatSelectSearchComponent,
) => ({
  component: MatSelectSearchComponent,
  props: args,
});

const fb = new FormBuilder();
const form = fb.group({
  test: [''],
});

export const Primary: Story<MatSelectSearchComponent> = Template.bind({});
Primary.args = {
  label: 'Label',
  placeholderLabel: 'Placeholder Label',
  noEntriesFoundLabel: 'No Entries Found',
  isRequired: false,
  hasSelectAll: true,
  hasResetFilters: true,
  optionValue: 'value',
  optionLabel: 'label',
  serverSideSearch: false,
  disableOptionCentering: true,
  showLoadingBar: false,
  parentForm: form,
  parentFormControlName: 'test',
};

[alanrichards86]

Fixed my issue. I moved the definition of my parentForm arg up to the Template const definition.

const Template: Story<MatSelectSearchComponent> = (
  args: MatSelectSearchComponent,
) => ({
  component: MatSelectSearchComponent,
  parentForm: form,  <--- Moved here
  props: args,
});

[work933k]

@alanrichards86 Hi Alan,
My suspicion is that you actually don't set the "parentForm"-property on the component any more. Thus not actually fixed.

[santiagof4]

Issue still persist in Angular 15 + Storybook 7.0.2. Any of the proposed solutions/workarounds worked for me, so I did this:

const form = new FormGroup({ test: new FormControl('') })
delete form['controls']['test']['_parent']

And then this form can be used as args and it is even visible in the UI

[barthofu]

Thanks it is finaly working thanks to this fix!

[flensrocker]

For those who have a more complex FormGroup:

const deleteParent = <TControl extends AbstractControl>(control: TControl): TControl => {
  delete control["_parent"];
  if (control instanceof FormGroup || control instanceof FormRecord) {
    for (const childKey of Object.keys(control.controls)) {
      deleteParent(control.controls[childKey]);
    }
  } else if (control instanceof FormArray) {
    for (const child of control.controls) {
      deleteParent(child);
    }
  }
  return control;
};

You can then do:

const form = deleteParent(new FormGroup(...));

[flensrocker]

One thing to mention: deleting the _parent reference breaks .valueChanges/.statusChanges on the FormGroup. So if you have validators on a parent, they will not work in your story.

I switched to using a wrapper component, which excepts a string and than maps that to the required inputs of the real component.

const mapping = {
  example1: () => ({
    form: new FormGroup(...),
    additionalInput: ...
  }),
};

@Component({
  selector: "my-component-wrapper",
  template: `<my-component *ngIf="form && additionalInput" [form]="form" [additionalInput]="additionalInput" />`,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [NgIf, MyComponent],
})
class MyWrapperComponent {
  form: FormGroup | null = null;
  additionalInput: ... | null = null;

  @Input() set input(value: keyof typeof mapping) {
    const input = mapping[value]();
    this.form = input.form;
    this.additionalInput = input.additionalInput;
  }
}

const meta: Meta<MyWrapperComponent> = {
  title: "My Component",
  component: MyWrapperComponent,
  decorators: [
    applicationConfig({
      providers: [...],
    }),
  ],
};
export default meta;

type Story = StoryObj<MyWrapperComponent>;

export const Example1: Story = {
  args: {
    input: "example1",
  },
};

[work933k]

Related: #16855

[maidmehic]

Using the custom render function and passing the FormGroup/FormArray/FormControl directly from there worked out for me.

const Input: Story = { render: (args: InputComponent) => ({ props: { ...args, control: new FormControl() } }) };

[work933k]

I suspect that using the mapper is not a solution for Angular with FormGroup instances.
Aha.. It might be caused by me having a custom component with a property FormGroup. I can probably refactor this.

[kyleryanbanks]

Here's a relatively light option using setters to allow for patching values as args. Just make sure you're building the form in the constructor and not in onInit, or Storybook will try to patch before the form is in place.

// Angular Component
@Component({
  selector: 'add-checking-account',
  templateUrl: './add-checking-account.component.html',
  styleUrls: ['./add-checking-account.component.scss'],
})
export class RewardsAddCheckingAccountComponent {
  _vm?: RewardsAddCheckingAccountViewModel;
  
  set _patchForm(form) {
    this.addCheckingAccountForm.patchValue(form);
  }

  addCheckingAccountForm: UntypedFormGroup;
  submitted = false;

  constructor(private formBuilder: UntypedFormBuilder) {
    this.addCheckingAccountForm = this.formBuilder.group(
      {
        accountName: [''],
        routingNumber: [
          '',
          [
            Validators.required,
            Validators.minLength(9),
            Validators.maxLength(9),
          ],
        ],
        accountNumber: [
          '',
          [
            Validators.required,
            Validators.pattern('(?!0+$)(\\d{0,1}[\\d\\s]{1,16})'),
          ],
        ]
      },
    );
  }
}


// Storybook
export default {
  title: 'Rewards/Add Checking Account',
  component: RewardsAddCheckingAccountComponent,
} as Meta;

const Template: StoryFn<RewardsAddCheckingAccountComponent> = (args) => ({
  moduleMetadata: {
    imports: [
      ReactiveFormsModule,
      MockContentDirectivesModule,
      ButtonComponent,
    ],
    declarations: [
      IconButtonComponent,
      SecondaryButtonCtaComponent,
      CheckboxComponent,
    ],
  },
  props: args,
});

export const Empty = {
  render: Template,
  args: {
    _vm: createMockRewardsAddCheckingAccountViewModel(),
  },
};

export const Invalid = {
  render: Template,
  args: {
    ...Empty.args,
    _patchForm: {
      accountName: 'Test',
      routingNumber: '123',
      accountNumber: '22',
    },
  },
};

export const Errored = {
  render: Template,
  args: {
    ...Invalid.args,
    submitted: true,
  },
};

[sebastienservouze]

Hi ! I had this annoying issue as well with my Form stories...

But I found a trick which maintains a fully fonctionnal FormGroup (with valueChanges working properly) in stories 🎉

Storybook tries to stringify any args you pass to a component.
We can just tell our formGroups to be stringified by our rules.
By setting toJSON() on our objects, we can prevent Storybook from trying to serialize a circular structure.

const MY_FORM = new FormGroup({
    a: new FormControl('A'),
    b: new FormControl('B'),
})

// Tell JSON.stringify to serialize it as null > No circular dependency
// You could return any value you like though
MY_FORM['toJSON'] = () => null; 

export const FormStory: Story = {
    name: 'FormStory',
    args: {
        form: MY_FORM
    },
};

Note that this would work for ANY object that circles when stringified