I have a form which is dynamically built using Ionic React and Yup for validation, this is done based on information coming from an API but I have an issue if I do not select a radio button when I press submit the radio buttons become unclickable which means I can never get the error away.
I have created an example here with a hardcoded form rather than it being populated dynamically and if you click Save without doing anything you will then not be able to select the radio buttons but I can't workout where my issue is coming from.
Edit:
Here is the main section of code not working:
import React, { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import {
IonList,
IonRadioGroup,
IonItem,
IonLabel,
IonRadio,
IonButton,
IonContent,
IonPage,
setupIonicReact,
IonInput
} from "@ionic/react";
/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";
/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";
/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
/* Theme variables */
import "./theme/variables.css";
setupIonicReact();
const validationSchema = yup.object().shape({
q7: yup.string().required("selection is required")
});
export default function App() {
const {
register,
reset,
getValues,
handleSubmit,
control,
formState: { errors }
} = useForm({
resolver: yupResolver(validationSchema),
mode: "all"
});
const onSubmit = (data: any) => {
console.log(data);
};
// useEffect(() => {
// reset({
// // q7: "6"
// });
// }, [reset]);
return (
<React.Fragment>
<IonPage className="xion-page" id="main-cntent">
<IonContent className="ion-padding">
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<>
values:{getValues("name")}
<IonInput {...register("name")}></IonInput>
error:{errors["q7"]?.message}
values:{getValues("q7")}
<Controller
control={control}
name="q7"
render={({ field: { onChange, value, ref } }) => (
<>
{console.log(value)}
<IonList>
<IonRadioGroup
ref={ref}
defaultValue=""
// allowEmptySelection={true}
value={value ?? ""}
onIonChange={({ detail: { value } }) =>
onChange(value ?? "")
}
>
<IonItem>
<IonLabel>Type 2</IonLabel>
<IonRadio value="2" slot="start" />
</IonItem>
<IonItem>
<IonLabel>Type 4</IonLabel>
<IonRadio slot="start" value="4" />
</IonItem>
<IonItem>
<IonLabel>Type 6</IonLabel>
<IonRadio slot="start" value="6" />
</IonItem>
</IonRadioGroup>
</IonList>
</>
)}
/>
<br />
<IonButton type="submit">Save</IonButton>
</>
</form>
</div>
</IonContent>
</IonPage>
</React.Fragment>
);
}
Your problem is that you should pass in onChange function js event. In onIonChange modified event with custom properties. But you actually passed a value to the function, not an event.
You can find in docks where is standard js event in onIonChange or just setValue
<IonRadioGroup
{...field}
onIonChange={
(event) => {
setValue('q7', event.detail.value)
}
}
>
https://codesandbox.io/s/crimson-breeze-d9fptl?file=/src/App.tsx:2253-2591