# @bepasquet/dynamic-form [](https://www.webcomponents.org/element/@bepasquet/dynamic-form) [](https://www.npmjs.com/package/@bepasquet/dynamic-form) Dynamic form is a webcomponent that makes angular dynamic form approach available on vanilla js please feel free to open issues, sugestions and code improvements everything is welcome ## Install ``` $ npm install @bepasquet/dynamic-form ``` ## Usage ``` ``` ## Documnetation ### Questions The question input of the dynamic-form is a json string containing an array of questions for example: ``` [ { key: "name", label: "Name", value: null, validators: [ { name: "required" }, { name: "minLength", argument: 2 } ], control: "textbox", type: "text", errors: [ { name: "required", message: "Please enter a name" } ] }, { key: "email", label: "Email", value: null, validators: [{ name: "required" }, { name: "email" }], control: "textbox", type: "text", errors: [ { name: "required", message: "Please enter a email" }, { name: "email", message: "Please enter a valid email" } ] } ] ``` The questions of type checkbox can contain options to work as a form array if no options are passed will be a boolean value on checked radio buttons and selectbox must contain options. Options keys are te value you want to get from the form and the value is the text to display the question object will have an interface as describe at the bottom ### Error handling Error are set with name and message in case of using default validation from the validators set at the botton error will follow ``` { name: "required", message: "Please enter this field" } { name: "min", message: "The minimun value is 12" } ``` With custom validator see full example ### Validators ``` { name: "min", argument: number } { name: "max", argument: number } { name: "required", argument: null } { name: "email", argument: null } { name: "minLength", argument: number } { name: "maxLength", argument: number } { name: "pattern", argument: string } ``` also custom validators are posible a custom validator is a function that evaluates to a null value if there is there no error or to an object with a key containing the error name set to true for example ``` function addressValidator(control) { return !!control.get("street").value || !!control.get("area").value ? null : { invalidAddress: true }; } window["addressValidator"] = addressValidator; ``` control is a abstract control from angular if you need more information follow the angular docs you need to atach the function to the window object so the component can read it and set the definition to true in the validation check the full example ### Configuration Configure the styles and the submit button text ``` ``` ## Style type You can style the form with crafted styles by default with no styles or use either material or bootstrap ## Interfaces #### Configuration ``` export interface Configuration { styleType?: StyleType; buttonText?: string; } ``` #### Form Question ``` import { QuestionValidator } from "./question-validator.interface"; import { QuestionOptions } from "./question-options.interface"; import { QuestionError } from "./question-error.interface"; type control = | "textbox" | "selectbox" | "checkbox" | "textarea" | "onlyInt" | "group"; type type = "text" | "email" | "password" | "number"; export interface FormQuestion { value: T; key: string; label: string; control: control; type?: type; options?: QuestionOptions[]; validators?: QuestionValidator[]; errors: QuestionError[]; group: FormQuestion[]; } ``` #### Question Options ``` export interface QuestionOptions { key: string; value: string; } ``` #### Question Validators ``` export interface QuestionValidator { name: string; argument?: any; definition?: boolean; } ``` #### Question Error ``` export interface QuestionError { name: string; message: string; } ``` ## Types #### StyleType ``` export type StyleType = "material" | "bootstrap" | "default"; ``` ## Examples ### Material Design ``` ``` ### Bootstrap ``` ``` ### Full example using material design ``` ``` ## Advanced Dynamic forms has the ability to pass inner groups with crafted validation for that you have to define a validator function and attached to the window object and pass the name on the group validator array and the definition set to true here is an example ``` function addressValidator(control) { return !!control.get("street").value || !!control.get("area").value ? null : { invalidAddress: true }; } window["addressValidator"] = addressValidator; const questions = [{ key: "address", control: "group", validators: [ { name: "addressValidator", definition: true } ], group: [ { key: "street", label: "Street", value: null, control: "textbox", type: "text" }, { key: "area", label: "Area", value: null, control: "textbox", type: "text" } ] }]; ``` ## Contributing Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate. ## License [MIT](https://choosealicense.com/licenses/mit/)