react-hook-form/

1import { Container, Input, VStack } from "@chakra-ui/react";
2import React from "react";
3import { SubmitHandler, useForm } from "react-hook-form"
4
5type Inputs = {
6  example: string,
7  exampleRequired: string,
8};
9
10/**
11 * TODO: Write out form
12 *
13 * @returns {React.ReactElement} form component
14 */
15export function <%= _.upperFirst(_.camelCase(name)) %>Form() {
16  const {
17    register,
18    handleSubmit,
19    watch,
20    formState: { errors },
21  } = useForm<Inputs>();
22  const onSubmit: SubmitHandler<Inputs> = (data) =>
23    window.alert(JSON.stringify(data));
24
25  console.log(watch("example")); // watch input value by passing the name of it
26
27  return (
28    <Container>
29      {/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
30      <form onSubmit={handleSubmit(onSubmit)}>
31        <VStack py="8">
32          {/* register your input into the hook by invoking the "register" function */}
33          <Input placeholder="Text input" {...register("example")} />
34
35          {/* include validation with required or other standard HTML validation rules */}
36          <Input
37            placeholder="Required input"
38            {...register("exampleRequired", { required: true })}
39          />
40          {/* errors will return when field validation fails  */}
41          {errors.exampleRequired && <span>This field is required</span>}
42
43          <Input type="submit" />
44        </VStack>
45      </form>
46    </Container>
47  );
48}