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

refactor(form): validation attributes set null instead of false (#215)

Browse source
This commit is contained in:
Ayo Ayco 2022-11-28 19:46:22 +01:00 committed by GitHub
parent 033d0322bb
commit 1d77e18f31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/form/components/Field.astro
View file

@ -20,16 +20,16 @@ export interface Props {
const { control, showValidationHints, showErrors = false, readOnly = false } = Astro.props;
const hasError: boolean = control.errors?.length ? control.errors[0]?.category === 'error' : false;
const hasWarn: boolean = control.errors?.length ? control.errors[0]?.category === 'warn' : false;
const hasInfo: boolean = control.errors?.length ? control.errors[0]?.category === 'info' : false;
const hasError: boolean = control.errors?.some((error) => error.category === 'error');
const hasWarn: boolean = control.errors?.some((error) => error.category === 'warn');
const hasInfo: boolean = control.errors?.some((error) => error.category === 'info');
---
<div
class="field"
data-validator-error={hasError.toString()}
data-validator-warn={hasWarn.toString()}
data-validator-info={hasInfo.toString()}
data-validator-error={hasError ? hasError.toString() : null}
data-validator-warn={hasWarn ? hasWarn.toString() : null}
data-validator-info={hasInfo ? hasInfo.toString() : null}
>
<Label control={control} showValidationHints={showValidationHints}>
{

4
packages/form/components/Form.astro
View file

@ -72,7 +72,7 @@ const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;
}
[data-validator-hints='true'][data-validator-info='true'],
[data-validator-hints='true'] [data-validator-info='true'] {
color: blue;
border-color: blue;
color: green;
border-color: green;
}
</style>

12
packages/form/components/controls/Input.astro
View file

@ -14,9 +14,9 @@ const { control, readOnly } = Astro.props;
const { validators = [] } = control;
const hasError: boolean = control.errors?.length ? control.errors[0]?.category === 'error' : false;
const hasWarn: boolean = control.errors?.length ? control.errors[0]?.category === 'warn' : false;
const hasInfo: boolean = control.errors?.length ? control.errors[0]?.category === 'info' : false;
const hasError: boolean = control.errors?.some((error) => error.category === 'error');
const hasWarn: boolean = control.errors?.some((error) => error.category === 'warn');
const hasInfo: boolean = control.errors?.some((error) => error.category === 'info');
// @ts-ignore
const validatorAttributes: Record<string, string> = validators.reduce((prev, val) => {
@ -43,9 +43,9 @@ const validatorAttributes: Record<string, string> = validators.reduce((prev, val
checked={control.value === 'checked'}
placeholder={control.placeholder}
data-label={control.label}
data-validator-error={hasError.toString()}
data-validator-warn={hasWarn.toString()}
data-validator-info={hasInfo.toString()}
data-validator-error={hasError ? hasError.toString() : null}
data-validator-warn={hasWarn ? hasWarn.toString() : null}
data-validator-info={hasInfo ? hasInfo.toString() : null}
readonly={readOnly || null}
disabled={(readOnly || null) && control.type === 'checkbox'}
{...validatorAttributes}