PageForm

Getting Started

The Ansible UI Framework PageForm uses react-hook-form.

The standard layout for creating a page with a form:

<Page>
  <PageLayout>
    <PageHeader />
    <PageForm>
      <PageFormInput />
      <PageFormInput />
      <PageFormInput />
    </PageForm>
  </PageLayout>
</Page>

Inputs

PageFormTextInput

<PageFormTextInput
  name="name"
  label="Name"              
  placeholder="Enter name"
  isRequired
  minLength={10}
  maxLength={100}
  pattern={/^startsWith/}
  validate={(value:string) => "some error string"}
/>

Validation

Prop	Type	Description
isRequired	boolean	Boolean which, if true, indicates that the input must have a value before the form can be submitted. You can assign a string to return an error message in the errors object.
maxLength	number	The maximum length of the value to accept for this input.
minLength	number	The minimum length of the value to accept for this input.
max	number	The minimum value to accept for this input.
min	number	The minimum value to accept for this input.
pattern	RegExp	The regex pattern for the input.
validate	Function | Object	You can pass a callback function as the argument to validate, or you can pass an object of callback functions to validate all of them. This function will be executed on its own without depending on other validation rules included in the required attribute.

Reference: https://react-hook-form.com/api/useform/register