[React Hook Form] React Hook Form 공부 - 14 (폼 항목 disable 하기) [7/25 study]

React Hook Form 공부 - 14

 

폼 항목 disable 하기

HTML 태그에는 disabled 항목이 있는데요. 버튼에 disabled 항목이 추가되면 입력이 안 됩니다. 

React-Hook-Form에도 disabled 항목이 있는데요. 이 항목이 true이면, 입력도 안되고 해당 항목은 undefined가 됩니다. 

그리고 해당 항목에 지정되어 있던 validation도 적용이 되지 않습니다. 

그리고 disabled를 watch함수와 같이 쓸 수 있는데요. 코드를 보겠습니다.

<input
  type="number"
  id="age"
  {...register("age", {
    disabled: watch("username") === "",
    valueAsNumber: true,
    required: "Age is required.",
  })}
/>

 

usename 항목이 비어있다면 true가 될 거고, 그러면 disabled 항목이 true가 되면서 결국 "age" 항목은 입력이 안되게 됩니다. 

disabled 항목 사용법은 wach 함수와 응용해서 사용하시면 됩니다.