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

refactor: formatting

Browse source
This commit is contained in:
Ayo 2022-09-27 17:37:52 +02:00
parent d585975091
commit 1444086b14
2 changed files with 27 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/Form.astro
View file

@ -1,24 +1,32 @@
---
import {FormGroup} from './form-group';
import { FormGroup } from './form-group';
export interface Props {
formGroup: FormGroup;
}
const form: FormGroup = Astro.props.formGroup;
---
<form>
{form?.controls?.map(control => (
{
form?.controls?.map((control) => (
<div>
{(control.labelPosition === 'left')
? <label for={control.name}>{control.label}</label>
: null}
{control.label && (!control.labelPosition || control.labelPosition === 'left') ? (
<label for={control.name}>{control.label}</label>
) : null}
<input name={control.name} id={control.name} type={control.type} value={control.value} checked={control.value==='checked'} />
{(control.labelPosition === 'right')
? <label for={control.name}>{control.label}</label>
: null}
<input
name={control.name}
id={control.name}
type={control.type}
value={control.value}
checked={control.value === 'checked'}
/>
{control.label && control.labelPosition === 'right' ? (
<label for={control.name}>{control.label}</label>
) : null}
</div>
))}
))
}
</form>

10
src/form-group.ts
View file

@ -1,14 +1,12 @@
import { FormControl } from "./form-control";
import { FormControl } from './form-control';
export class FormGroup {
controls: FormControl[];
constructor(controls: FormControl[]) {
this.controls = controls.map(control => (
{
this.controls = controls.map((control) => ({
...control,
labelPosition: control.labelPosition || 'left'
}
));
labelPosition: control.labelPosition || 'left',
}));
}
}