import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms"; import { Meta, moduleMetadata, Story } from "@storybook/angular"; import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; import { ButtonModule } from "../button"; import { InputModule } from "../input/input.module"; import { I18nMockService } from "../utils/i18n-mock.service"; import { BitFormFieldComponent } from "./form-field.component"; import { FormFieldModule } from "./form-field.module"; export default { title: "Component Library/Form/Error Summary", component: BitFormFieldComponent, decorators: [ moduleMetadata({ imports: [FormsModule, ReactiveFormsModule, FormFieldModule, InputModule, ButtonModule], providers: [ { provide: I18nService, useFactory: () => { return new I18nMockService({ required: "required", inputRequired: "Input is required.", inputEmail: "Input is not an email-address.", fieldsNeedAttention: "$COUNT$ field(s) above need your attention.", }); }, }, ], }), ], parameters: { design: { type: "figma", url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A17689", }, }, } as Meta; const fb = new FormBuilder(); const formObj = fb.group({ name: ["", [Validators.required]], email: ["", [Validators.required, Validators.email]], }); function submit() { formObj.markAllAsTouched(); } const Template: Story = (args: BitFormFieldComponent) => ({ props: { formObj: formObj, submit: submit, ...args, }, template: `
Name Email
`, }); export const Default = Template.bind({}); Default.props = {};