useEffect(() => { register({ name: "User_Status" }, { required: true }) }, [])
const UserForm = (props) => { const initialFormState = { id: null, name: '', username: '' }; const { register, errors, handleSubmit, setValue } = useForm({ defaultValues: props.user ? props.user : initialFormState, }); setValue('name', props.user ? props.user.name : ''); setValue('username', props.user ? props.user.username : ''); return ( <form onSubmit={handleSubmit(props.onSubmit)}> <label>Name</label> <input type='text' name='name' ref={register({ required: { value: true, message: 'name is required' } })} /> <div>{errors?.name?.message}</div> <label>Username</label> <input type='text' name='username' ref={register({ required: { value: true, message: 'username is required' } })} /> <div>{errors?.username?.message}</div> <button>{props.user ? 'Edit User' : 'Add new user'}</button> </form> ); }
const UsersSearchForm = ({ updateKeyword }) => { const { register, handleSubmit, errors } = useForm() const onSubmit = (data) => { updateKeyword(data.keyword) } const handleChange = (event) => { const keyword = event.target.value updateKeyword(keyword) } return ( <SearchForm onSubmit={handleSubmit(onSubmit)}> <Label htmlFor='filter'>Search users by name</Label> <Input name='keyword' type='text' placeholder='Keyword' ref={register({ required: true })} onChange={handleChange} /> {errors.keyword && <span>Keyword is required</span>} </SearchForm> ) }
function MaterialHookForm() { const { register, handleSubmit, setValue, reset, watch } = useForm({ defaultValues, }); const selectValue = watch('select'); const onSubmit = (data) => console.log(data); useEffect(() => { register({ name: 'select' }); }, [register]); const handleChange = (e) => setValue('select', e.target.value); return ( <form onSubmit={handleSubmit(onSubmit)}> <Select value={selectValue} onChange={handleChange}> <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> <br /> <Input inputRef={register} name='input' /> <button type='button' onClick={() => reset({ ...defaultValues })}> Reset </button> <input type='submit' /> </form> ); }
id="title" aria-invalid={!!errors.title || undefined} ref={register({required: 'Title is required.'})} /> {!!errors.title && ( id="image_tags" aria-invalid={!!errors.image_tags || undefined} ref={register()} /> {!!errors.image_tags && ( id="content" aria-invalid={!!errors.content || undefined} ref={register({required: 'Content is required.'})} /> {!!errors.content && (