{"id":17132580,"url":"https://github.com/dyalicode/npm-unpkg-test","last_synced_at":"2026-01-05T13:35:25.264Z","repository":{"id":41749105,"uuid":"225704005","full_name":"dyaliCode/npm-unpkg-test","owner":"dyaliCode","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-05T02:15:24.000Z","size":4345,"stargazers_count":0,"open_issues_count":20,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T11:24:53.199Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dyaliCode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-03T19:57:15.000Z","updated_at":"2019-12-03T20:47:12.000Z","dependencies_parsed_at":"2023-02-03T05:30:58.979Z","dependency_job_id":null,"html_url":"https://github.com/dyaliCode/npm-unpkg-test","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyaliCode%2Fnpm-unpkg-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyaliCode%2Fnpm-unpkg-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyaliCode%2Fnpm-unpkg-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyaliCode%2Fnpm-unpkg-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dyaliCode","download_url":"https://codeload.github.com/dyaliCode/npm-unpkg-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245217434,"owners_count":20579291,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T19:27:30.695Z","updated_at":"2026-01-05T13:35:25.215Z","avatar_url":"https://github.com/dyaliCode.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"100%\" height=\"300\" src=\"./logo.png\" alt=\"Svelte Formly\" /\u003e\n\u003c/p\u003e\n\n# Svelte Formly\n\nby [@kamalkech](https://github.com/kamalkech)\n\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![CircleCI](https://circleci.com/gh/beyonk-adventures/svelte-component-livereload-template.svg?style=shield)](https://circleci.com/gh/beyonk-adventures/svelte-component-livereload-template) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)\n\n## Features\n\n- ⚡️ Generate dynamic forms for sveltejs / Sapper js.\n- 😍 Easy to extend with custom field type, custom validation.\n\n## Installation\n\nnpm i svelte-formly\n\n## Usage\n\n```javascript\n\u003cscript\u003e\n  import { get } from \"svelte/store\";\n  import { valuesForm, Field } from \"svelte-formly\";\n\n  const fields = [\n    {\n      type: \"color\",\n      name: \"color\",\n      id: \"color\",\n      label: \"Color Form\"\n    },\n    {\n      type: \"text\",\n      name: \"firstname\",\n      value: \"\",\n      id: \"firstname\",\n      class: [\"form-control\"],\n      placeholder: \"Tap your first name\",\n      validation: [\"required\", \"min:6\"],\n      messages: {\n        required: \"Firstname field is required!\",\n        min: \"First name field must have more that 6 caracters!\"\n      }\n    },\n    {\n      prefix: {\n        class: [\"custom-form-group\"]\n      },\n      type: \"text\",\n      name: \"lastname\",\n      value: \"\",\n      id: \"lastname\",\n      placeholder: \"Tap your lastname\",\n      description: {\n        class: [\"custom-class-desc\"],\n        text: \"Custom text for description\"\n      }\n    },\n    {\n      type: \"email\",\n      name: \"email\",\n      value: \"\",\n      id: \"email\",\n      placeholder: \"Tap your email\",\n      validation: [\"required\", \"email\"]\n    },\n    {\n      type: \"radio\",\n      name: \"gender\",\n      radios: [\n        {\n          id: \"female\",\n          value: \"female\",\n          title: \"Female\"\n        },\n        {\n          id: \"male\",\n          value: \"male\",\n          title: \"Male\"\n        }\n      ]\n    },\n    {\n      type: \"select\",\n      name: \"city\",\n      id: \"city\",\n      label: \"City\",\n      validation: [\"required\"],\n      options: [\n        {\n          value: 1,\n          title: \"Agadir\"\n        },\n        {\n          value: 2,\n          title: \"Casablanca\"\n        }\n      ]\n    }\n  ];\n\n  let message = \"\";\n  let values = {};\n  let color = \"#ff3e00\";\n\n  function onSubmit() {\n    const data = get(valuesForm);\n    if (data.isValidForm) {\n      values = data.values;\n      color = values.color ? values.color : color;\n      message = \"Congratulation! now your form is valid\";\n    } else {\n      message = \"Your form is not valid!\";\n    }\n  }\n\u003c/script\u003e\n```\n\n## For Sapper\n\n```javascript\n\u003cscript\u003e\n  import { onMount } from \"svelte\";\n  import { get } from \"svelte/store\";\n\n  let Field;\n  let valuesForm;\n\n  onMount(async () =\u003e {\n    const module = await import(\"svelte-formly\");\n    Field = module.Field;\n    valuesForm = module.valuesForm;\n  });\n\n  const fields = [\n    {\n      type: \"text\",\n      name: \"username\",\n      id: \"username\",\n      validation: [\"required\"],\n      messages: {\n        required: \"Username is required!\"\n      }\n    },\n    {\n      type: \"email\",\n      name: \"email\",\n      id: \"email\",\n      validation: [\"required\", \"email\"],\n      messages: {\n        required: \"E-mail is required!\"\n      }\n    }\n  ];\n\n  function onSubmit() {\n    const data = get(valuesForm);\n    if (data.isValidForm) {\n      const values = data.values;\n    }\n  }\n\u003c/script\u003e\n```\n\n```css\n\u003cstyle\u003e\n  * {\n    color: var(--theme-color);\n  }\n  .custom-form :global(.form-group) {\n    padding: 10px;\n    border: solid 1px var(--theme-color);\n    margin-bottom: 10px;\n  }\n  .custom-form :global(.custom-form-group) {\n    padding: 10px;\n    background: var(--theme-color);\n    color: white;\n    margin-bottom: 10px;\n  }\n  .custom-form :global(.class-description) {\n    color: var(--theme-color);\n  }\n\u003c/style\u003e\n```\n\n```html\n\u003ch1 style=\"--theme-color: {color}\"\u003eSvelte Formly\u003c/h1\u003e\n\u003ch3\u003e{message}\u003c/h3\u003e\n\u003cform\n  on:submit|preventDefault=\"{onSubmit}\"\n  class=\"custom-form\"\n  style=\"--theme-color: {color}\"\n\u003e\n  \u003cField {fields} /\u003e\n  \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n\u003chr\u003e\n\n### Params\n\nInputs : text, password, email, number, tel\n\n```javascript\n\u003cscript\u003e\n  fields = [\n    {\n      type: \"text\", // or password, email, number, tel, required\n      name: \"namefield\", // required\n      id: \"idfield\", // required\n      class: \"\", // optional\n      value: \"\", // optional\n      label: \"\", // optional\n      placeholder: \"\", // optional\n      min: null, // optional\n      max: null, // optional\n      disabled: false, // optional\n      validation: [] // optional\n    }\n  ]\n\u003c/script\u003e\n```\n\nTextarea\n\n```javascript\n\u003cscript\u003e\n  fields = [\n    {\n      type: \"textarea\", // required\n      name: \"namefield\", // required\n      id: \"idfield\", // required\n      class: \"\", // optional\n      value: \"\", // optional\n      label: \"\", // optional\n      disabled: false, // optional\n      rows: null, // optional\n      cols: null, // optional\n      validation: [] // optional\n    }\n  ]\n\u003c/script\u003e\n```\n\nSelect\n\n```javascript\n\u003cscript\u003e\n  fields = [\n    {\n      type: \"select\", // required\n      name: \"namefield\", // required\n      id: \"idfield\", // required\n      class: \"\", // optional\n      label: \"\", // optional\n      disabled: false, // optional\n      options: [\n        {\n          value: 1,\n          title: 'option 1'\n        },\n        {\n          value: 2,\n          title: 'option 2'\n        }\n      ], // required\n      validation: [] // optional\n    }\n  ]\n\u003c/script\u003e\n```\n\nRadio\n\n```javascript\n\u003cscript\u003e\n  fields = [\n    {\n      type: \"radio\", // required\n      name: \"namefield\", // required\n      id: \"idfield\", // required\n      class: \"\", // optional\n      label: \"\", // optional\n      disabled: false, // optional\n      radios: [\n        {\n          id: 'radio1',\n          value: 1,\n          title: 'radio 1'\n        },\n        {\n          id: 'radio2',\n          value: 2,\n          title: 'radio 2'\n        }\n      ], // required\n      validation: [] // optional\n    }\n  ]\n\u003c/script\u003e\n```\n\nColor\n\n```javascript\n\u003cscript\u003e\n  fields = [\n    {\n      type: \"color\", // required\n      name: \"namefield\", // required\n      id: \"idfield\", // required\n      class: \"\", // optional\n      label: \"\", // optional\n      disabled: false, // optional\n      value: \"#ff3e00\" // optional\n    }\n  ]\n\u003c/script\u003e\n```\n\nRange\n\n```javascript\n\u003cscript\u003e\n  fields = [\n    {\n      type: \"range\", // required\n      name: \"namefield\", // required\n      id: \"idfield\", // required\n      class: \"\", // optional\n      label: \"\", // optional\n      min: 10, // required\n      max: 100, // required\n      step: 10 // required\n    }\n  ]\n\u003c/script\u003e\n```\n\n\u003chr\u003e\n\n### Validation\n\nList rules to validate form.\n\n```javascript\n\u003cscript\u003e\n  const fields = [\n    {\n      ...,\n      validation: [\n        'required',\n        'min:number',\n        'max:number',\n        'between:number:number',\n        'equal:number',\n        'email',\n        'url'\n        fnc\n      ]\n    }\n  ];\n\u003c/script\u003e\n```\n\nValidation with custom rule\n\n```javascript\n\u003cscript\u003e\n  import { get } from \"svelte/store\";\n  import { Field, valuesForm } from \"svelte-formly\";\n\n  const fields = [\n    {\n      type: \"text\",\n      name: \"firstname\",\n      id: \"firstname\",\n      validation: [\"required\"]\n    },\n    {\n      type: \"text\",\n      name: \"lastname\",\n      id: \"lastname\",\n      validation: [\"required\", notEqual, customRule2],\n      messages: {\n        notEqual: \"Last name not equal to First name\", // Custom message error, property name must equal to function name.\n        customRule2: 'foo bar'\n      }\n    }\n  ];\n\n  // Custom rule to force field\n  function notEqual() {\n    const values = get(valuesForm).values;\n    if (values.firstname === values.lastname) {\n      return false;\n    }\n    return true;\n  }\n\n  function customRule2() {\n    // ...others conditions.\n  }\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdyalicode%2Fnpm-unpkg-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdyalicode%2Fnpm-unpkg-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdyalicode%2Fnpm-unpkg-test/lists"}