f502e6ca24
* feat: add readOnly flag on form * fix: resolve PR coments * fix: add flag disabled to fields that dont have effect on readonly attr
44 lines
1.1 KiB
Text
44 lines
1.1 KiB
Text
---
|
|
/**
|
|
* DEFAULT INPUT COMPONENT
|
|
*/
|
|
import type { InputType } from '@astro-reactive/common';
|
|
import type { FormControl } from '../../core/form-control';
|
|
|
|
export interface Props {
|
|
control: FormControl;
|
|
readOnly?: boolean;
|
|
}
|
|
|
|
const { control, readOnly } = Astro.props;
|
|
|
|
const { validators = [] } = control;
|
|
|
|
const hasErrors: boolean = !!control.errors?.length;
|
|
|
|
const validatorAttributes: Record<string, string> = validators?.reduce((prev, validator) => {
|
|
const split: string[] = validator.split(':');
|
|
const label: string = `data-${split[0]}` || 'invalid';
|
|
const value: string | null = split.length > 1 ? split[1] ?? null : 'true';
|
|
|
|
return {
|
|
...prev,
|
|
[label]: value,
|
|
};
|
|
}, {});
|
|
---
|
|
|
|
<input
|
|
name={control.name}
|
|
id={control.name}
|
|
type={control.type as InputType}
|
|
value={control.value?.toString()}
|
|
checked={control.value === 'checked'}
|
|
placeholder={control.placeholder}
|
|
data-label={control.label}
|
|
data-label-position={control.labelPosition}
|
|
data-validator-haserrors={hasErrors.toString()}
|
|
readonly={readOnly || null}
|
|
disabled={(readOnly || null) && control.type === 'checkbox'}
|
|
{...validatorAttributes}
|
|
/>
|