Needlessly Provoking Marsupials

    rectangular-forms
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.18 • Public • Published

    RectAngular Forms

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

    Installation

    npm install rxjs --save
    
    npm install rectangular-forms --save

    Basic Example

    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 (
        <WForm formConfig={formConfig}>
          <WControlData />
          {/* <WControlData/> show the data of this context */}
    
          <WFormControl name="name">
            {({ control }) => {
              const { value, onChange, onBlur, disabled } = control;
              return (
                <input
                  value={value || ""}
                  onChange={onChange}
                  onBlur={onBlur}
                  disabled={disabled}
                />
              );
            }}
          </WFormControl>
    
          <WFormControl name="type.document">
            {({ control }) => {
              const { value, onChange, onBlur, disabled } = control;
              return (
                <input
                  value={value || ""}
                  onChange={onChange}
                  onBlur={onBlur}
                  disabled={disabled}
                />
              );
            }}
          </WFormControl>
        </WForm>
      );
    };

    Array With Nested Object Example

    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 (
        <input
          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 (
        <WForm formConfig={formConfig}>
          <WControlData />
          {/* <WControlData/> show the data of this context */}
          <WFormControl name="name">
            <Input />
          </WFormControl>
    
          <WFormControl name="type.document">
            <Input />
          </WFormControl>
    
          <table>
            <thead>
              <th>quantity</th>
              <th>price</th>
              <th>Add Line</th>
              <th>Remove Line</th>
            </thead>
            <tbody>
              <WFormArrayElement name="lines">
                <tr>
                  <td>
                    <WFormControl name="quantity">
                      <Input />
                    </WFormControl>
                  </td>
                  <td>
                    <WFormControl name="price">
                      <Input />
                    </WFormControl>
                  </td>
                  <td>
                    <WFormGroup>
                      {/* here the context is implicit   */}
                      {({ control }) => {
                        return (
                          <button
                            onClick={() => {
                              const linesFormArray = control.parent as FormArray;
                              linesFormArray.push(createLineForm());
                            }}
                          />
                        );
                      }}
                    </WFormGroup>
                  </td>
                  <td>
                    <WFormGroup>
                      {/* here the context is implicit   */}
                      {({ control, index }) => {
                        return (
                          <button
                            onClick={() => {
                              const linesFormArray = control.parent as FormArray;
                              linesFormArray.removeAt(index);
                            }}
                          />
                        );
                      }}
                    </WFormGroup>
                  </td>
                </tr>
              </WFormArrayElement>
            </tbody>
          </table>
        </WForm>
      );
    };

    License

    MIT

    Install

    npm i rectangular-forms

    DownloadsWeekly Downloads

    76

    Version

    1.0.18

    License

    MIT

    Unpacked Size

    1.01 MB

    Total Files

    161

    Last publish

    Collaborators

    • welldonesolutions-wds