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

28
src/Form.astro
View file

@ -6,19 +6,27 @@ export interface Props {
const form: FormGroup = Astro.props.formGroup; const form: FormGroup = Astro.props.formGroup;
--- ---
<form> <form>
{form?.controls?.map(control => ( {
form?.controls?.map((control) => (
<div> <div>
{(control.labelPosition === 'left') {control.label && (!control.labelPosition || control.labelPosition === 'left') ? (
? <label for={control.name}>{control.label}</label> <label for={control.name}>{control.label}</label>
: null} ) : null}
<input name={control.name} id={control.name} type={control.type} value={control.value} checked={control.value==='checked'} /> <input
name={control.name}
{(control.labelPosition === 'right') id={control.name}
? <label for={control.name}>{control.label}</label> type={control.type}
: null} value={control.value}
checked={control.value === 'checked'}
/>
{control.label && control.labelPosition === 'right' ? (
<label for={control.name}>{control.label}</label>
) : null}
</div> </div>
))} ))
}
</form> </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 { export class FormGroup {
controls: FormControl[]; controls: FormControl[];
constructor(controls: FormControl[]) { constructor(controls: FormControl[]) {
this.controls = controls.map(control => ( this.controls = controls.map((control) => ({
{
...control, ...control,
labelPosition: control.labelPosition || 'left' labelPosition: control.labelPosition || 'left',
} }));
));
} }
} }