https://github.com/dyalicode/qwik-formly
https://github.com/dyalicode/qwik-formly
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/dyalicode/qwik-formly
- Owner: dyaliCode
- Created: 2023-07-10T12:32:37.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-27T11:13:50.000Z (almost 3 years ago)
- Last Synced: 2025-01-29T11:24:48.774Z (over 1 year ago)
- Language: TypeScript
- Size: 482 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Qwik Formly
by [@kamalkech](https://github.com/kamalkech)
## Introduction
- ⚡️ Generate dynamic and reactive forms.
- 😍 Easy to extend with custom field type, custom validation.
## Documentation
For qwik it will be soon here [Link Documentation](https://www.formly-js.com/)
## Quick Installation
```shell
npm install qwik-formly
```
## Usage
```tsx
import { component$, $ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import { Formly, type Field } from "qwik-formly";
export default component$(() => {
const fields: Field[] = [
{
type: "input", // required
name: "username", // required
attributes: {
type: 'text',
id: "username", // required
label: "Username", // optional
classes: ["class-username"],
placeholder: 'Username'
},
},
{
type: "input", // required
name: "email", // required
attributes: {
type: 'email',
id: "email", // required
label: "Email", // optional
classes: ["class-email"],
placeholder: 'Email'
},
},
{
type: "checkbox", // required
name: "checkA", // required
attributes: {
id: "checkA", // required
label: "CheckboxA", // optional
classes: ["class-checkbox"], // optional
},
// required
extra: {
items: [
{
name: "item1",
value: "value1",
title: "Value 1",
},
{
name: "item2",
value: "value2",
title: "Value 2",
},
],
},
prefix: {
tag: 'fieldset',
classes: ['class1', 'class2'],
}
},
]
const onUpdate = $((data: any) => {
console.log('onUpdate', data);
})
const onSubmit = $((data: any) => {
console.log('onSubmit', data);
})
return (
<>
Formly
>
);
});
export const head: DocumentHead = {
title: "Qwik Formly",
meta: [
{
name: "description",
content: "Formly with qwik",
},
],
};
```