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