ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: modify validators docs (#233)

Browse source
This commit is contained in:
Preet Sojitra 2022-12-19 00:01:04 +05:30 committed by GitHub
parent c73675710f
commit e502d1d9cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
apps/docs/src/pages/en/api/validator/validators.md
View file

@ -10,8 +10,8 @@ The `Validators` class provides a set of built-in validators that can be used by
```astro ```astro
--- ---
import Form, { FormGroup } from "@astro-reactive/form"; import Form, {FormGroup} from "@astro-reactive/form"
import { Validators } from "@astro-reactive/validator"; import {Validators} from "@astro-reactive/validator"
const form = new FormGroup([ const form = new FormGroup([
{ {
@ -24,7 +24,7 @@ const form = new FormGroup([
label: "Password", label: "Password",
validators: [Validators.required, Validators.minLength(8)], validators: [Validators.required, Validators.minLength(8)],
}, },
]); ])
--- ---
<Form formGroups={form} /> <Form formGroups={form} />
@ -48,8 +48,8 @@ The `Validators.required` validator is used to ensure that a form control has a
```astro ```astro
--- ---
import Form, { FormGroup } from "@astro-reactive/form"; import Form, {FormGroup} from "@astro-reactive/form"
import { Validators } from "@astro-reactive/validator"; import {Validators} from "@astro-reactive/validator"
const form = new FormGroup([ const form = new FormGroup([
{ {
@ -57,7 +57,7 @@ const form = new FormGroup([
label: "Username", label: "Username",
validators: [Validators.required], validators: [Validators.required],
}, },
]); ])
--- ---
<Form formGroups={form} /> <Form formGroups={form} />
@ -69,8 +69,8 @@ The `Validators.requiredChecked` validator is used to ensure that a checkbox is
```astro ```astro
--- ---
import Form, { FormGroup } from "@astro-reactive/form"; import Form, {FormGroup} from "@astro-reactive/form"
import { Validators } from "@astro-reactive/validator"; import {Validators} from "@astro-reactive/validator"
const form = new FormGroup([ const form = new FormGroup([
{ {
@ -79,7 +79,7 @@ const form = new FormGroup([
type: "checkbox", type: "checkbox",
validators: [Validators.requiredChecked], validators: [Validators.requiredChecked],
}, },
]); ])
--- ---
<Form formGroups={form} /> <Form formGroups={form} />
@ -91,8 +91,8 @@ The `Validators.email` validator is used to ensure that a form control has a val
```astro ```astro
--- ---
import Form, { FormGroup } from "@astro-reactive/form"; import Form, {FormGroup} from "@astro-reactive/form"
import { Validators } from "@astro-reactive/validator"; import {Validators} from "@astro-reactive/validator"
const form = new FormGroup([ const form = new FormGroup([
{ {
@ -100,7 +100,7 @@ const form = new FormGroup([
label: "Email", label: "Email",
validators: [Validators.email], validators: [Validators.email],
}, },
]); ])
--- ---
<Form formGroups={form} /> <Form formGroups={form} />
@ -112,16 +112,17 @@ The `Validators.min` validator is used to ensure that the numeric value of form
```astro ```astro
--- ---
import Form, { FormGroup } from "@astro-reactive/form"; import Form, {FormGroup} from "@astro-reactive/form"
import { Validators } from "@astro-reactive/validator"; import {Validators} from "@astro-reactive/validator"
const form = new FormGroup([ const form = new FormGroup([
{ {
name: "price", name: "price",
label: "Price", label: "Price",
type: "number",
validators: [Validators.min(8)], validators: [Validators.min(8)],
}, },
]); ])
--- ---
<Form formGroups={forms} /> <Form formGroups={forms} />
@ -133,16 +134,17 @@ The `Validators.max` validator is used to ensure that the numeric value of form
```astro ```astro
--- ---
import Form, { FormGroup } from "@astro-reactive/form"; import Form, {FormGroup} from "@astro-reactive/form"
import { Validators } from "@astro-reactive/validator"; import {Validators} from "@astro-reactive/validator"
const form = new FormGroup([ const form = new FormGroup([
{ {
name: "price", name: "price",
label: "Price", label: "Price",
type: "number",
validators: [Validators.max(8)], validators: [Validators.max(8)],
}, },
]); ])
--- ---
<Form formGroups={forms} /> <Form formGroups={forms} />
@ -154,8 +156,8 @@ The `Validators.minLength` validator is used to ensure that the length of the va
```astro ```astro
--- ---
import Form, { FormGroup } from "@astro-reactive/form"; import Form, {FormGroup} from "@astro-reactive/form"
import { Validators } from "@astro-reactive/validator"; import {Validators} from "@astro-reactive/validator"
const form = new FormGroup([ const form = new FormGroup([
{ {
@ -163,7 +165,7 @@ const form = new FormGroup([
label: "Password", label: "Password",
validators: [Validators.minLength(8)], validators: [Validators.minLength(8)],
}, },
]); ])
--- ---
<Form formGroups={forms} /> <Form formGroups={forms} />
@ -175,8 +177,8 @@ The `Validators.maxLength` validator is used to ensure that the length of the va
```astro ```astro
--- ---
import Form, { FormGroup } from "@astro-reactive/form"; import Form, {FormGroup} from "@astro-reactive/form"
import { Validators } from "@astro-reactive/validator"; import {Validators} from "@astro-reactive/validator"
const form = new FormGroup([ const form = new FormGroup([
{ {
@ -184,7 +186,7 @@ const form = new FormGroup([
label: "Password", label: "Password",
validators: [Validators.maxLength(8)], validators: [Validators.maxLength(8)],
}, },
]); ])
--- ---
<Form formGroups={forms} /> <Form formGroups={forms} />