This is a quick post showing quickly how to make latest version of React Hook Form work with Ionic Framework ReactJS Components.
The previous post example will only work on older versions of the form library.
This is based on the Controller API discussed here in the documentation - https://react-hook-form.com/api#Controller
const App: React.FunctionComponent = () => {
const { handleSubmit, control } = useForm();
/**
*
* @param data
*/
const onSubmit = (data: any) => {
debugger;
alert(JSON.stringify(data, null, 2));
};
return (
<IonApp>
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton />
</IonButtons>
<IonTitle>Detail</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<p>Details</p>
<form onSubmit={handleSubmit(data => console.log(data))}>
<IonItem>
<IonLabel>Gender</IonLabel>
<Controller
render={({ onChange, onBlur, value }) => (
<IonSelect placeholder="Select One" onIonChange={onChange}>
<IonSelectOption value="FEMALE">Female</IonSelectOption>
<IonSelectOption value="MALE">Male</IonSelectOption>
</IonSelect>
)}
control={control}
name="gender"
rules={{ required: true }}
/>
</IonItem>
<IonItem>
<IonLabel>Email</IonLabel>
<Controller
render={({ onChange, onBlur, value }) => (<IonInput onIonChange={onChange}/>)}
control={control}
name="email"
rules={{
required: true,
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: "invalid email address"
}
}}
/>
</IonItem>
<IonItem>
<Controller
render={({ onChange, onBlur, value }) => (
<IonRange
min={-200}
max={200}
color="secondary"
onIonChange={onChange}
>
<IonLabel slot="start">-200</IonLabel>
<IonLabel slot="end">200</IonLabel>
</IonRange>
)}
control={control}
name="rangeInfo"
rules={{ required: true }}
/>
</IonItem>
<IonButton type="submit">submit</IonButton>
</form>
</IonContent>
</IonPage>
</IonApp>
);
};
Updated Example Source Code From Stackblitz
Original Video Showing the Use of React Hook Form
Posted on Jul 17 by:
Aaron K Saunders
See more, like and subscribe 👉🏾 Aaron Saunders 📺 https://www.youtube.com/aaronsaundersci?sub_confirmation=1
Ionic
The open source UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web — all from a single codebase.
Discussion
Thank you for updating this. How would you go about testing this component? I have a simple Ionic Text Input component wrapped in a Controller just like the example above.
I've tried to use the example from this article:
I've also tried this (since ion input components have a
detailproperty that specifies the value of the input:None of these methods get me what I need which is the value for these inputs being updated in the test. Any ideas?
Thanks for this quick update