PalmyraNewForm#

@palmyralabs/rt-forms · src/palmyra/form/PalmyraNewForm.tsx

Overview#

Create-flow wrapper around PalmyraForm. Binds a Wire store against endPoint, exposes saveData on the ref so the caller (or a dialog template) can trigger the POST, and forwards success/failure through onSaveSuccess / onSaveFailure.

Props — IPalmyraNewFormInput#

interface IPalmyraNewFormInput extends IuseFormOptions<StoreOptions>,
                                       IFormQueryEventHandler,
                                       IFormSaveEventHandler {
  initialData?:          any;
  refreshOnSaveResponse?: boolean;
  children?:             any;
  onValidChange?:        (isValid: boolean) => void;
}

interface IuseFormOptions<T> {
  endPoint:         IEndPoint;
  endPointOptions?: Record<string, string | number>;
  axiosCustomizer?: (axios: AxiosInstance) => void;
  storeFactory?:    StoreFactory<any, T>;
  storeOptions?:    T;
  formRef?:         React.Ref<ISaveForm>;
}

interface IFormSaveEventHandler {
  preSave?:       (data: any) => any | Promise<any>;
  onSaveSuccess?: (response: any) => void;
  onSaveFailure?: (error: any) => void;
}

Ref — ISaveForm#

interface ISaveForm extends IForm {
  saveData(data?: any): Promise<any>;
  refresh(): void;
}

Example#

import { useRef } from 'react';
import { PalmyraNewForm, FieldGroupContainer, type ISaveForm } from '@palmyralabs/rt-forms';
import { TextField, TextArea } from '@palmyralabs/rt-forms-mantine';
import { Button } from '@mantine/core';

export function NewManufacturerForm({ onRefresh }: { onRefresh: () => void }) {
  const formRef = useRef<ISaveForm>(null);

  return (
    <>
      <PalmyraNewForm
        formRef={formRef}
        endPoint="/mstManufacturer"
        onSaveSuccess={() => { onRefresh(); formRef.current?.refresh(); }}
        onSaveFailure={(err) => console.error(err)}
      >
        <FieldGroupContainer columns={2}>
          <TextField attribute="name"          label="Name" required />
          <TextField attribute="contactMobile" label="Mobile" />
          <TextField attribute="contactEmail"  label="Email"  validRule="email" />
          <TextArea  attribute="address"       label="Address" colspan={2} />
        </FieldGroupContainer>
      </PalmyraNewForm>
      <Button onClick={() => formRef.current?.saveData()}>Save</Button>
    </>
  );
}
Backward PalmyraForm PalmyraEditForm Forward