Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dyalicode/npm-unpkg-test
https://github.com/dyalicode/npm-unpkg-test
Last synced: 25 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/dyalicode/npm-unpkg-test
- Owner: dyaliCode
- Created: 2019-12-03T19:57:15.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:15:24.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T19:27:27.059Z (2 months ago)
- Language: HTML
- Size: 4.14 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte Formly
by [@kamalkech](https://github.com/kamalkech)
[](http://standardjs.com) [](https://circleci.com/gh/beyonk-adventures/svelte-component-livereload-template) [](https://svelte.dev)
## Features
- ⚡️ Generate dynamic forms for sveltejs / Sapper js.
- 😍 Easy to extend with custom field type, custom validation.
## Installation
npm i svelte-formly
## Usage
```javascript
import { get } from "svelte/store";
import { valuesForm, Field } from "svelte-formly";
const fields = [
{
type: "color",
name: "color",
id: "color",
label: "Color Form"
},
{
type: "text",
name: "firstname",
value: "",
id: "firstname",
class: ["form-control"],
placeholder: "Tap your first name",
validation: ["required", "min:6"],
messages: {
required: "Firstname field is required!",
min: "First name field must have more that 6 caracters!"
}
},
{
prefix: {
class: ["custom-form-group"]
},
type: "text",
name: "lastname",
value: "",
id: "lastname",
placeholder: "Tap your lastname",
description: {
class: ["custom-class-desc"],
text: "Custom text for description"
}
},
{
type: "email",
name: "email",
value: "",
id: "email",
placeholder: "Tap your email",
validation: ["required", "email"]
},
{
type: "radio",
name: "gender",
radios: [
{
id: "female",
value: "female",
title: "Female"
},
{
id: "male",
value: "male",
title: "Male"
}
]
},
{
type: "select",
name: "city",
id: "city",
label: "City",
validation: ["required"],
options: [
{
value: 1,
title: "Agadir"
},
{
value: 2,
title: "Casablanca"
}
]
}
];
let message = "";
let values = {};
let color = "#ff3e00";
function onSubmit() {
const data = get(valuesForm);
if (data.isValidForm) {
values = data.values;
color = values.color ? values.color : color;
message = "Congratulation! now your form is valid";
} else {
message = "Your form is not valid!";
}
}
```
## For Sapper
```javascript
import { onMount } from "svelte";
import { get } from "svelte/store";
let Field;
let valuesForm;
onMount(async () => {
const module = await import("svelte-formly");
Field = module.Field;
valuesForm = module.valuesForm;
});
const fields = [
{
type: "text",
name: "username",
id: "username",
validation: ["required"],
messages: {
required: "Username is required!"
}
},
{
type: "email",
name: "email",
id: "email",
validation: ["required", "email"],
messages: {
required: "E-mail is required!"
}
}
];
function onSubmit() {
const data = get(valuesForm);
if (data.isValidForm) {
const values = data.values;
}
}
```
```css
* {
color: var(--theme-color);
}
.custom-form :global(.form-group) {
padding: 10px;
border: solid 1px var(--theme-color);
margin-bottom: 10px;
}
.custom-form :global(.custom-form-group) {
padding: 10px;
background: var(--theme-color);
color: white;
margin-bottom: 10px;
}
.custom-form :global(.class-description) {
color: var(--theme-color);
}
```
```html
Svelte Formly
{message}
Submit
```
### Params
Inputs : text, password, email, number, tel
```javascript
fields = [
{
type: "text", // or password, email, number, tel, required
name: "namefield", // required
id: "idfield", // required
class: "", // optional
value: "", // optional
label: "", // optional
placeholder: "", // optional
min: null, // optional
max: null, // optional
disabled: false, // optional
validation: [] // optional
}
]
```
Textarea
```javascript
fields = [
{
type: "textarea", // required
name: "namefield", // required
id: "idfield", // required
class: "", // optional
value: "", // optional
label: "", // optional
disabled: false, // optional
rows: null, // optional
cols: null, // optional
validation: [] // optional
}
]
```
Select
```javascript
fields = [
{
type: "select", // required
name: "namefield", // required
id: "idfield", // required
class: "", // optional
label: "", // optional
disabled: false, // optional
options: [
{
value: 1,
title: 'option 1'
},
{
value: 2,
title: 'option 2'
}
], // required
validation: [] // optional
}
]
```
Radio
```javascript
fields = [
{
type: "radio", // required
name: "namefield", // required
id: "idfield", // required
class: "", // optional
label: "", // optional
disabled: false, // optional
radios: [
{
id: 'radio1',
value: 1,
title: 'radio 1'
},
{
id: 'radio2',
value: 2,
title: 'radio 2'
}
], // required
validation: [] // optional
}
]
```
Color
```javascript
fields = [
{
type: "color", // required
name: "namefield", // required
id: "idfield", // required
class: "", // optional
label: "", // optional
disabled: false, // optional
value: "#ff3e00" // optional
}
]
```
Range
```javascript
fields = [
{
type: "range", // required
name: "namefield", // required
id: "idfield", // required
class: "", // optional
label: "", // optional
min: 10, // required
max: 100, // required
step: 10 // required
}
]
```
### Validation
List rules to validate form.
```javascript
const fields = [
{
...,
validation: [
'required',
'min:number',
'max:number',
'between:number:number',
'equal:number',
'email',
'url'
fnc
]
}
];
```
Validation with custom rule
```javascript
import { get } from "svelte/store";
import { Field, valuesForm } from "svelte-formly";
const fields = [
{
type: "text",
name: "firstname",
id: "firstname",
validation: ["required"]
},
{
type: "text",
name: "lastname",
id: "lastname",
validation: ["required", notEqual, customRule2],
messages: {
notEqual: "Last name not equal to First name", // Custom message error, property name must equal to function name.
customRule2: 'foo bar'
}
}
];
// Custom rule to force field
function notEqual() {
const values = get(valuesForm).values;
if (values.firstname === values.lastname) {
return false;
}
return true;
}
function customRule2() {
// ...others conditions.
}
```