All files / src/chap04 FromKorean.js

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>
  );
}