Aaron K Saunders🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆
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
