# All files / src/chap06 FormMui.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
    78
    79
    80
    81
    82

     import { Button, FormControl, FormControlLabel, FormHelperText,
      FormLabel, Radio, RadioGroup, TextField } from '@mui/material';
    import { useForm } from 'react-hook-form';

    export default function FormMui() {
      const defaultValues = {
        name: '홍길동',
        email: 'admin@example.com',
        gender: 'male',
        memo: ''
      };

      const { register, handleSubmit, formState: { errors } } = useForm({
        defaultValues
      });
      const onsubmit = data => console.log(data);
      const onerror = err => console.log(err);

      return (
        <form onSubmit={handleSubmit(onsubmit, onerror)} noValidate>
          <div>
            <TextField label="이름" margin="normal"
              {...register('name', {
                required: '이름은 필수 입력 항목입니다.',
                maxLength: {
                  value: 20,
                  message: '이름은 20자 이내로 작성해 주세요'
                }
              })}
              error={'name' in errors}
              helperText={errors.name?.message} />
          </div>
          <div>
            <FormControl>
              <FormLabel component="legend">성별:</FormLabel>
              <RadioGroup name="gender">
                <FormControlLabel value="male" control={<Radio />} label="남성"
                  {...register('gender', {
                    required: '성별은 필수입니다.',
                  })}
                />
                <FormControlLabel value="female" control={<Radio />} label="여성"
                  {...register('gender', {
                    required: '성별은 필수입니다.',
                  })}
                />
              </RadioGroup>
              <FormHelperText error={'gender' in errors}>
                {errors.gender?.message}
              </FormHelperText>
            </FormControl>
          </div>
          <div>
            <TextField type="email" label="이메일 주소" margin="normal"
              {...register('email', {
                required: '이메일 주소는 필수 입력 항목입니다.',
                pattern: {
                  value: /([a-z\d+\-.]+)@([a-z\d-]+(?:\.[a-z]+)*)/i,
                  message: '이메일 주소 형식이 잘못됐습니다.'
                }
              })}
              error={'email' in errors}
              helperText={errors.email?.message} />
          </div>
          <div>
            <TextField label="비고" margin="normal" multiline
              {...register('memo', {
                required: '비고는 필수 입력 항목입니다.',
                minLength: {
                  value: 10,
                  message: '비고는 10자 이상으로 작성해 주세요.'
                },
              })}
              error={'memo' in errors}
              helperText={errors.memo?.message} />
          </div>
          <div>
            <Button variant="contained" type="submit">제출하기</Button>
          </div>
        </form>
      );
    }