react-hook-form Controller 사용시 rules validate가 동작하지 않을때

검색 키워드: react-hook-form controller rules not working

 

reference

- https://stackoverflow.com/questions/75268266/react-hook-form-rules-validate-not-triggered

React Hook Form - Rules.Validate not triggered

 

<Controller
    name="commentContents"
    control={control}
    rules={{
        maxLength: {
            value: 2000,
            message: '최대 2000자까지 가능합니다',
        },
        required: true,
    }}
    render={({ field, fieldState: { error } }) => (
        <>
            <MentionsInput
                value={field.value}
                classNames={style}
                allowSuggestionsAboveCursor={true}
                onChange={e => field.onChange(e.target.value)}
            >
                <Mention
                    className={style.mentions__mention}
                    trigger="@"
                    data={data}
                    displayTransform={(id, display) => `@${display} `}
                    markup="@[__display__](__id__) "
                />
            </MentionsInput>

        </>
    )}
/>

 

Controller의 render에 field.onChange를 사용해서 트리거가 잘동작하여 validation될것 같지만 아니다. useForm에 꼭 `mode: 'onChange'`를 넣어주어야 동작한다