127 lines
2.8 KiB
TypeScript
127 lines
2.8 KiB
TypeScript
import {
|
|
IonButton,
|
|
IonButtons,
|
|
IonCardSubtitle,
|
|
IonContent,
|
|
IonHeader,
|
|
IonIcon,
|
|
IonInput,
|
|
IonItem,
|
|
IonLabel,
|
|
IonPage,
|
|
IonTitle,
|
|
IonToolbar,
|
|
useIonRouter,
|
|
} from '@ionic/react';
|
|
import './Home.scss';
|
|
import { useForm } from 'react-hook-form';
|
|
|
|
import { alertCircleOutline, chevronBackOutline } from 'ionicons/icons';
|
|
import React from 'react';
|
|
|
|
const Home = (): React.JSX.Element => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
mode: 'onTouched',
|
|
reValidateMode: 'onChange',
|
|
});
|
|
|
|
const fields = [
|
|
{
|
|
label: 'Firstname',
|
|
required: true,
|
|
requiredOptions: {
|
|
maxLength: 10,
|
|
},
|
|
props: {
|
|
name: 'firstname',
|
|
type: 'text',
|
|
placeholder: 'Enter a username',
|
|
},
|
|
},
|
|
|
|
{
|
|
label: 'Age',
|
|
required: true,
|
|
requiredOptions: {
|
|
min: 18,
|
|
max: 99,
|
|
},
|
|
props: {
|
|
name: 'age',
|
|
type: 'number',
|
|
inputmode: 'numeric',
|
|
placeholder: 'Enter your age',
|
|
},
|
|
},
|
|
];
|
|
|
|
console.log(errors);
|
|
|
|
const onSubmit = (data) => {
|
|
console.log(data);
|
|
};
|
|
|
|
const router = useIonRouter();
|
|
function handleBackClick() {
|
|
router.goBack();
|
|
}
|
|
|
|
return (
|
|
<IonPage>
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonTitle>React Hook Form</IonTitle>
|
|
|
|
<IonButtons slot="start">
|
|
<IonButton onClick={() => handleBackClick()}>
|
|
<IonIcon icon={chevronBackOutline} color="primary" />
|
|
</IonButton>
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent fullscreen>
|
|
<IonHeader collapse="condense">
|
|
<IonToolbar>
|
|
<IonTitle size="large">React Hook Form</IonTitle>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
|
|
<IonCardSubtitle className="ion-text-center ion-margin">
|
|
An example using React Hook Form
|
|
</IonCardSubtitle>
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
{fields.map((field, index) => {
|
|
const { label, required, requiredOptions, props } = field;
|
|
|
|
return (
|
|
<IonItem key={`form_field_${index}`} lines="full">
|
|
<>
|
|
<IonLabel position="fixed">{label}</IonLabel>
|
|
<IonInput
|
|
{...props}
|
|
{...register(props.name, { required, ...requiredOptions })}
|
|
/>
|
|
</>
|
|
{required && errors[props.name] && (
|
|
<IonIcon icon={alertCircleOutline} color="danger" />
|
|
)}
|
|
</IonItem>
|
|
);
|
|
})}
|
|
|
|
<IonButton type="submit" className="ion-margin-top" expand="full">
|
|
Submit
|
|
</IonButton>
|
|
</form>
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default Home;
|