@goodie-forms/core 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,6 +52,57 @@
|
|
|
52
52
|
|
|
53
53
|
Core package of Goodie Forms.
|
|
54
54
|
|
|
55
|
+
# Quick Example
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
import { FormController } from "@goodie-forms/core";
|
|
59
|
+
import z from "zod";
|
|
60
|
+
|
|
61
|
+
// 1. Define a schema for your form data
|
|
62
|
+
const userRegisterSchema = z.object({
|
|
63
|
+
name: z.string().min(1, "Name is required"),
|
|
64
|
+
email: z.string().email("Invalid email address"),
|
|
65
|
+
password: z.string().min(6, "Password must be at least 6 characters"),
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
// 2. Create a form controller with the schema
|
|
69
|
+
const formController = new FormController({
|
|
70
|
+
validationSchema: userRegisterSchema,
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
// 3. Register form fields
|
|
74
|
+
const nameEl = document.getElementById("name") as HTMLInputElement;
|
|
75
|
+
const emailEl = document.getElementById("email") as HTMLInputElement;
|
|
76
|
+
const passwordEl = document.getElementById("password") as HTMLInputElement;
|
|
77
|
+
|
|
78
|
+
formController
|
|
79
|
+
.registerField(formController.path.of("name"))
|
|
80
|
+
.bindElement(nameEl);
|
|
81
|
+
formController
|
|
82
|
+
.registerField(formController.path.of("email"))
|
|
83
|
+
.bindElement(emailEl);
|
|
84
|
+
formController
|
|
85
|
+
.registerField(formController.path.of("password"))
|
|
86
|
+
.bindElement(passwordEl);
|
|
87
|
+
|
|
88
|
+
// 4. Handle issues
|
|
89
|
+
formController.events.on("fieldIssuesUpdated", (path) => {
|
|
90
|
+
const field = formController.getField(path)!;
|
|
91
|
+
if (field.issues.length !== 0) {
|
|
92
|
+
field.boundElement?.classList.add("has-issues");
|
|
93
|
+
} else {
|
|
94
|
+
field.boundElement?.classList.remove("has-issues");
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
// 5. Handle form submission
|
|
99
|
+
const formEl = document.getElementById("form") as HTMLFormElement);
|
|
100
|
+
const submitHandler = formController.createSubmitHandler(async (data) => {
|
|
101
|
+
console.log("Form submitted successfully with data:", data);
|
|
102
|
+
});
|
|
103
|
+
formEl.onsubmit = submitHandler;
|
|
104
|
+
```
|
|
105
|
+
|
|
55
106
|
## License
|
|
56
107
|
|
|
57
108
|
© 2026 Taha Anılcan Metinyurt (iGoodie)
|