Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: set-error.mdx #27

Merged
merged 2 commits into from
Feb 1, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 31 additions & 31 deletions src/content/docs/useform/seterror.mdx
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
---
title: setError
description: Manually set an input error
description: 입력 오류를 수동으로 설정하기
sidebar: apiLinks
---

## \</> `setError:` <TypeText>`(name: string, error: FieldError, { shouldFocus?: boolean }) => void`</TypeText>

The function allows you to manually set one or more errors.
이 함수는 하나 이상의 오류를 수동으로 설정할 수 있도록 합니다.

### Props

---

| Name | Type | Description |
| ------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | <TypeText>string</TypeText> | input's name. |
| `error` | <TypeText>`{ type: string, message?: string, types: MultipleFieldErrors }`</TypeText> | Set an error with its type and message. |
| config | <TypeText>`{ shouldFocus?: boolean }`</TypeText> | Should focus the input during setting an error. This only works when the input's reference is registered, it will not work for custom register as well. |
| Name | Type | Description |
| ------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | <TypeText>string</TypeText> | 입력 필드의 이름. |
| `error` | <TypeText>`{ type: string, message?: string, types: MultipleFieldErrors }`</TypeText> | 오류의 타입과 메시지를 설정합니다. |
| config | <TypeText>`{ shouldFocus?: boolean }`</TypeText> | 오류 설정 시 입력 필드에 포커스를 줄지 여부를 설정합니다. 이 기능은 입력 필드의 참조가 등록되어 있을 때만 동작하며, custom register에는 작동하지 않습니다. |

<Admonition type="important" title="Rules">

- This method will not persist the associated input error if the input passes `register`'s associated rules.
- 이 메서드는 입력이 `register`의 관련 규칙을 통과한 경우에는 관련된 입력 오류를 지속하지 않습니다.
```javascript
register('registerInput', { minLength: 4 });
setError('registerInput', { type: 'custom', message: 'custom message' });
// validation will pass as long as minLength requirement pass
register("registerInput", { minLength: 4 })
setError("registerInput", { type: "custom", message: "custom message" })
// minLength 요구 사항을 충족하는 한 유효성 검사는 통과합니다.
```
- An error that is not associated with an input field will be persisted until cleared with `clearErrors`. This behaviour is only applicable for built-in validation at field level.
- 입력 필드와 연관되지 않은 오류는 `clearErrors`를 통해 지워질 때까지 지속됩니다. 이 동작은 필드 수준에서의 내장 유효성 검사에만 해당됩니다.
```javascript
setError("notRegisteredInput", { type: "custom", message: "custom message" })
// clearErrors() need to invoked manually to remove that custom error
// 해당 오류를 제거하려면 clearErrors()를 수동으로 호출해야 합니다.
```
- You can set a server or global error with `root` as the key. This type of error will not persist with each submission.
- `root`를 키로 사용하여 서버 또는 전역 오류를 설정할 수 있습니다. 이 유형의 오류는 각 제출 시 지속되지 않습니다.
```javascript
setError("root.serverError", {
type: "400",
Expand All @@ -40,18 +40,18 @@ The function allows you to manually set one or more errors.
type: "random",
})
```
- Can be useful in the `handleSubmit` method when you want to give error feedback to a user after async validation. (ex: API returns validation errors)
- `shouldFocus` doesn't work when an input has been disabled.
- This method will force set `isValid` formState to `false`. However, it's important to be aware that `isValid` will always be derived from the validation result of your input registration rules or schema result.
- There are certain keywords that need to be avoided to prevent conflicts with type checking. They are `type` and `types`.
- 이 메서드는 비동기 유효성 검사 후, 사용자에게 오류 피드백을 제공하려는 경우, `handleSubmit` 메서드에서 유용할 수 있습니다. (예: API에서 유효성 검사 오류 반환 시)
- `shouldFocus`는 입력 필드가 비활성화된 경우 작동하지 않습니다.
- 이 메서드는 `isValid` 폼 상태를 `false`로 강제 설정합니다. 그러나 `isValid`는 항상 입력 등록 규칙 또는 스키마 결과의 유효성 검사 결과에서 파생된다는 점에 유의해야 합니다.
- 타입 검사를 방해하지 않기 위해 `type``types`라는 키워드는 피해야 합니다.

</Admonition>

**Examples:**

---

**Single Error**
**단일 오류 설정**

<TabGroup buttonLabels={["TS", "JS"]}>

Expand Down Expand Up @@ -123,7 +123,7 @@ const App = () => {

</TabGroup>

**Multiple Errors**
**다중 오류 설정**

<TabGroup buttonLabels={["TS", "JS"]}>

Expand Down Expand Up @@ -163,12 +163,12 @@ const App = () => {
{
type: "manual",
name: "username",
message: "Double Check This",
message: "한 번 더 확인하세요.",
},
{
type: "manual",
name: "firstName",
message: "Triple Check This",
message: "세 번 더 확인하세요.",
},
]

Expand Down Expand Up @@ -216,12 +216,12 @@ const App = () => {
{
type: "manual",
name: "username",
message: "Double Check This",
message: "한 번 더 확인하세요.",
},
{
type: "manual",
name: "firstName",
message: "Triple Check This",
message: "세 번 더 확인하세요.",
},
]

Expand All @@ -240,7 +240,7 @@ const App = () => {

</TabGroup>

**Single Field Errors**
**단일 필드 오류**

<TabGroup buttonLabels={["TS", "JS"]}>

Expand All @@ -267,8 +267,8 @@ const App = () => {
React.useEffect(() => {
setError("lastName", {
types: {
required: "This is required",
minLength: "This is minLength",
required: "이 필드는 필수입니다.",
minLength: "최소 길이가 부족합니다.",
},
})
}, [setValue])
Expand Down Expand Up @@ -309,8 +309,8 @@ const App = () => {
React.useEffect(() => {
setError("lastName", {
types: {
required: "This is required",
minLength: "This is minLength",
required: "이 필드는 필수입니다.",
minLength: "최소 길이가 부족합니다.",
},
})
}, [setError])
Expand All @@ -333,7 +333,7 @@ const App = () => {

</TabGroup>

**Server Error**
**서버 오류 설정**

```javascript copy
import * as React from "react";
Expand Down Expand Up @@ -369,6 +369,6 @@ const App = () => {

---

The following video explain `setError` API in detail.
다음 비디오는 `setError` API에 대해 자세히 설명합니다.

<YouTube youTubeId="raMqvE0YyIY" />