RectAngular Forms

This library adapt Angular Reactive Forms to being use on React. This library depends on rxjs.

Installation

``sh
npm install rxjs --save

npm install rectangular-forms --save
`

Basic Example

`js
import { useEffect } from "react";
import {
FormControl,
FormGroup,
useFormConfig,
WControlData,
WForm,
WFormControl,
} from "rectangular-forms";

export const Basic = () => {
const formConfig = useFormConfig({
createForm: (data) => {
const form = new FormGroup({
name: new FormControl(),
lastname: new FormControl(),
document: new FormGroup({
type: new FormControl(),
number: new FormControl(),
}),
});
form.patchValue(data);
return form;
},
});
const { loadSucceed } = formConfig;

useEffect(() => {
loadSucceed({
name: "Jhon",
lastname: "Doe",
document: {
type: "PASSPORT",
number: "2345656",
},
});
}, [loadSucceed]);

return (


{/ show the data of this context /}


{({ control }) => {
const { value, onChange, onBlur, disabled } = control;
return (
value={value || ""}
onChange={onChange}
onBlur={onBlur}
disabled={disabled}
/>
);
}}



{({ control }) => {
const { value, onChange, onBlur, disabled } = control;
return (
value={value || ""}
onChange={onChange}
onBlur={onBlur}
disabled={disabled}
/>
);
}}


);
};
`

Array With Nested Object Example

`js
import { useEffect } from "react";
import {
FormArray,
FormControl,
FormGroup,
useFormConfig,
WControlData,
WForm,
WFormArrayElement,
WFormControl,
WFormGroup,
} from "rectangular-forms";

const createLineForm = () => {
const form = new FormGroup({
price: new FormControl(),
quantity: new FormControl(),
});
return form;
};

export const Input = (props) => {
const { control } = props;
const { value, onChange, onBlur, disabled } = control;
return (
value={value || ""}
onChange={onChange}
onBlur={onBlur}
disabled={disabled}
/>
);
};

export const Array = () => {
const formConfig = useFormConfig({
createForm: (data) => {
const lines: FormGroup[] = [];
for (let index = 0; index < data.lines.length; index++) {
lines.push(createLineForm());
}
const form = new FormGroup({
name: new FormControl(),
lastname: new FormControl(),
document: new FormGroup({
type: new FormControl(),
number: new FormControl(),
}),
lines: new FormArray(lines),
});
form.patchValue(data);
return form;
},
});
const { loadSucceed } = formConfig;

useEffect(() => {
loadSucceed({
name: "Jhon",
lastname: "Doe",
document: {
type: "PASSPORT",
number: "2345656",
},
lines: [
{ price: 2, quantity: 20 },
{ price: 4, quantity: 10 },
],
});
}, [loadSucceed]);

return (


{/ show the data of this context /}

quantity	price	Add Line	Remove Line
		{/ here the context is implicit /} {({ control }) => { return ( onClick={() => { const linesFormArray = control.parent as FormArray; linesFormArray.push(createLineForm()); }} /> ); }}	{/ here the context is implicit /} {({ control, index }) => { return ( onClick={() => { const linesFormArray = control.parent as FormArray; linesFormArray.removeAt(index); }} /> ); }}

);
};
``

License

MIT