React Hook Form 공부 - 16
폼 Submit disabled 시키기
폼의 Submit 버튼을 조건에 따라 disabled 시키는 방법입니다.
필요한 함수는 isDirty 값과 isValid 값인데요.
isDirty
- isDirty는 폼이 한 번이라도 수정되었는지 여부를 나타내는 속성
- 폼의 초기 상태와 비교하여 한 번이라도 변경이 발생하면 true를 반환하고, 변경이 없다면 false를 반환합니다.
- 이 속성은 사용자가 입력을 시작했는지, 아니면 여전히 폼이 초기 상태인지 확인하는 데 유용합니다.
isValid
- isValid는 폼이 유효한지 여부를 나타내는 속성
- 모든 필드가 유효성 검사를 통과하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
- 예를 들어, 특정 필드가 필수라면 해당 필드에 값이 입력되어야 isValid가 true가 됩니다.
formState: { errors, touchedFields, dirtyFields, isDirty, isValid },
formState에서 가져오시면 됩니다
그리고 아래 Submit 버튼이 있는 HTML에서 아래와 같이 고치면 됩니다.
<button disabled={!isDirty || !isValid}>Submit</button>
즉, 유저가 폼에 한 번도 접근 안 했을 경우 Submit 버튼을 disabled 한다는 뜻이고, isValid는 Validation 통과를 얘기하니까 통과 안 됐을 때 disabled 한다는 뜻입니다.