이번 포스팅에서는 KendoReact Form 컴포넌트를 사용하여 입력 폼을 만들어 보겠습니다.
저는 일반적으로 입력 폼을 만들 때 Form Component를 만들어서 사용하는 데 이번 포스팅에서는 KendoReact Form 가이드 문서에서 제공하는 Form Component를 사용해보겠습니다.
예제 화면 및 코드 보기
이번 포스팅의 예제 화면 및 코드는 stackblitz에서 확인할 수 있습니다.
Form Component
Form Component는 소스에서 볼 수 있듯이 Label과 입력 컴포넌트로 구성되어 있습니다.
export const FormInput = (fieldRenderProps: FieldRenderProps) => {
...
return (
<FieldWrapper>
<Label></Label>
<Input></Input>
<FieldWrapper>
);
};이번 포스팅에서 사용한 각 컴포넌트의 기본적인 설명은 KendoReact 문서를 참고하시면 됩니다.
- React Labels Library – Overview – KendoReact Docs & Demos (telerik.com)
- React Inputs Library – Overview – KendoReact Docs & Demos (telerik.com)
- React Date Inputs Library – Overview – KendoReact Docs & Demos (telerik.com)
- React Dropdowns Library – Overview – KendoReact Docs & Demos (telerik.com)
DropDownList Validation
Validator는 해당 필드의 유효성 체크 및 유효하지 않은 값이 있을 경우 메시지를 표시하기 위해 사용합니다. Validator 함수에서 빈 문자열이 아닌 경우에 문자열이 화면에 표시됩니다.
DropDownList에서도 동일하게 적용할 수 있는데, 저는 일반적으로 Validator를 DropDownList에 동일하게 적용하기 위해서 ID 값으로 0을 사용하지 않습니다.
const categoryValidator = (value: any) =>
!value
? 'Category is required.'
: value.id === 0
? 'Category is required.'
: '';
<Field
id="bed"
name="bed"
label="Bed Type"
component={FormDropDownList}
validator={categoryValidator}
data={minorCategory}
textField="text"
dataItemKey="id"
defaultItem={{
id: 0,
text: 'Select Room First',
}}
/>Cascading DropDownList
DropDownList와 관련한 기본적인 내용은 KendoReact DropDownList Overview에서 확인할 수 있습니다.
Cascading DropDownList는 대분류 – 중분류 – 소분류와 같이 대분류를 선택하고 대분류에 속하는 중분류를 선택하는 것을 말합니다.
아래 그림과 같이 Room Type을 선택할 경우 해당 Room에 해당하는 Bed Type을 선택할 수 있습니다.
여기까지는 큰 문제가 되지 않으나 Bed Type을 선택하고나서 Room Type을 변경하는 경우에 Bed Type을 초기화 해야 합니다.
아래 코드에서 15 – 20 라인에서와 같이 FormRenderProps의 onChange 함수를 사용하여 bed의 값을 defaultItem 값으로 초기화할 수 있습니다.
또한 22-24 라인에서와 같이 Room Type에서 선택한 값에 해당하는 Bed Type 값을 설정하여 Bed Type에 데이터를 바인딩할 수 있습니다.
<Field
id="room"
name="room"
label="Room Type"
component={FormDropDownList}
validator={categoryValidator}
data={major}
textField="text"
dataItemKey="id"
defaultItem={{
id: 0,
text: 'Select Room',
}}
onChange={(e) => {
formRenderProps.onChange('bed', {
value: {
id: 0,
text: 'Select Room First',
},
});
setMinorCategory(
minor.filter((item) => item.parent === e.value.id)
);
}}
/>
<Field
id="bed"
name="bed"
label="Bed Type"
component={FormDropDownList}
validator={categoryValidator}
data={minorCategory}
textField="text"
dataItemKey="id"
defaultItem={{
id: 0,
text: 'Select Room First',
}}
/>