astro-reactive-form/packages/form/components/Field.astro

48 lines
1.7 KiB
Text

---
/**
* DEFAULT CONTROL COMPONENT
*/
import type { Radio, Dropdown, TextArea } from '@astro-reactive/common';
import type { FormControl } from '../core/form-control';
import DropdownControl from './controls/Dropdown.astro';
import TextAreaControl from './controls/TextArea.astro';
import Input from './controls/Input.astro';
import RadioGroup from './controls/RadioGroup.astro';
import Errors from './Errors.astro';
import Label from './Label.astro';
export interface Props {
control: FormControl;
showValidationHints: boolean;
showErrors?: boolean; // feature flag for showing validation errors
readOnly?: boolean;
}
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;
---
<div
class="field"
data-validator-error={hasError.toString()}
data-validator-warn={hasWarn.toString()}
data-validator-info={hasInfo.toString()}
>
<Label control={control} showValidationHints={showValidationHints}>
{
control.type === 'radio' ? (
<RadioGroup control={control as Radio} readOnly={readOnly} />
) : control.type === 'dropdown' ? (
<DropdownControl control={control as Dropdown} readOnly={readOnly} />
) : control.type === 'textarea' ? (
<TextAreaControl control={control as TextArea} readOnly={readOnly} />
) : (
<Input control={control} readOnly={readOnly} />
)
}
{showErrors && <Errors errors={control.errors} />}
</Label>
</div>