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?