Is it possible to Mock an Angular FormGroup by creating a Provider?


I want to create a "Testbed" for storybook and embed a component which requires a FormGroup on a parent DOM element.
Is it possible to skip the template and pass all required elements to the reactive form control by providing an Injectable?

Before:

<div [formGroup]='formGroupA'>
   <app-example-field formControlName='example'></app-example-field>
</div>
import { FormGroup } from '@angular/forms';
// e.g.
const formGroup = new FormGroup({
  example: new FormControl('')
});

After: Direct template

<app-example-field formControlName='example'></app-example-field>
import { FormGroup, ReactiveFormsModule } from '@angular/forms';

// Storybook (should work in the same way as a standalone Module + Component) ... 
  decorators: [
    moduleMetadata({
      imports: [
        MyExampleModule,
        ReactiveFormsModule
      ],
      providers: [
        // What to put here?
      ]
    })
  ],

Without a valid formGroup the angular directive formControlName throws an error:
ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

Any idea? How to pass this issue?

Source: JavaSript – Stack Overflow

October 20, 2021
Category : News
Tags: angular | angular-reactive-forms | javascript | mocking | typescript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.