# All files / src/chap04 FromKorean.js

0% Statements 0/7
100% Branches 0/0
0% Functions 0/3
0% Lines 0/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77

     import { useForm } from 'react-hook-form';
    import { yupResolver } from '@hookform/resolvers/yup';
    import yup from './yup.kr.js';

    const schema = yup.object({
      name: yup
        .string()
        .label('이름')
        .required()
        .max(20),
      gender: yup
        .string()
        .label('성별')
        .required(),
      email: yup
        .string()
        .label('이메일 주소')
        .required()
        .email(),
      memo: yup
        .string()
        .label('비고')
        .required()
        .min(10)
    });

    export default function FormYup() {
      const { register, handleSubmit, formState: { errors } } = useForm({
        defaultValues: {
          name: '홍길동',
          email: 'admin@example.com',
          gender: 'male',
          memo: ''
        },
        resolver: yupResolver(schema),
      });
      const onsubmit = data => console.log(data);
      const onerror = err => console.log(err);

      return (
      <form onSubmit={handleSubmit(onsubmit, onerror)} noValidate>
          <div>
              <label htmlFor="name">이름:</label><br/>
              <input id="name" type="text"
                  {...register('name')} />
              <div>{errors.name?.message}</div>
          </div>
          <div>
              <label htmlFor="gender">성별:</label><br/>
              <label>
              <input type="radio" value="male"
                {...register('gender')} />남성
              </label>
              <label>
              <input type="radio" value="female"
                {...register('gender')} />여성
              </label>
              <div>{errors.gender?.message}</div>
          </div>
          <div>
              <label htmlFor="email">이메일 주소:</label><br/>
              <input id="email" type="email"
                  {...register('email')} />
              <div>{errors.email?.message}</div>
          </div>
          <div>
              <label htmlFor="memo">비고:</label><br/>
              <textarea id="memo"
                  {...register('memo')} />
              <div>{errors.memo?.message}</div>
          </div>
          <div>
              <button type="submit">비고</button>
          </div>
      </form>
      );
    }