Closed8
Material-UI + React Hook FormでMultipleなSelect使おうとしたら、Field is missing `name` attributeとなる
まつだけコンソールに下記のエラー。これはなんぞ。
Field is missing `name` attribute`
現在のコードはこれ。
<FormControl variant="outlined" className={styles.sort_control} margin="dense">
<Controller
name={name}
control={control}
multiple
defaultValue={selectedItems}
render={() => (
<Select
multiple
name={name}
value={selectedItems}
onChange={handleChange}
renderValue={(selected) => (
<div className={styles.pulldown__chips}>
{(selected as string[]).map((value) => (
<Chip key={value} label={items[parseInt(value, 10) - 1]} className={styles.pulldown__chip} />
))}
</div>
)}
MenuProps={MenuProps}
margin="dense"
inputRef={inputRef}
error={error}
>
{items.map((value, index) => (
<MenuItem key={value} value={`${index + 1}`} dense>
<Checkbox checked={props.selectedItems.indexOf(`${index + 1}`) > -1} />
<ListItemText primary={value} />
</MenuItem>
))}
</Select>
)}
/>
<FormHelperText>{helperText}</FormHelperText>
</FormControl>
このwarningが原因かどうか分からないけど、RHFのerror validationが正常に動作しない。
まつだけinputRef={inputRef}の行があるかないかで、warning出るor notが決まるっぽいからこのあたりを探る
まつだけSelectのinputRefにregisterを渡すやりかたでなく、Controllerのrulesに設定したら、とりあえずwarningは出なくなった。
ただ、エラーオブジェクトにエラー内容が入っていないようなので、あとはそこだけ対応する。
<FormControl
variant="outlined"
margin="dense"
className={styles.sort_control}
>
<Controller
name={name}
control={control}
defaultValue={selectedItems}
rules={{ required: '商品情報を入力してください' }}
render={() => (
<Select
multiple
value={selectedItems}
MenuProps={MenuProps}
onChange={handleChange}
renderValue={(selected) => (
<div className={styles.pulldown__chips}>
{
(selected as string[]).map((value) => (
<Chip key={value} label={items[parseInt(value, 10) - 1]} className={styles.pulldown__chip} />
))
}
</div>
)}
error={error}
>
{
items.map((value, index) => (
<MenuItem key={value} value={`${index + 1}`} dense>
<Checkbox checked={props.selectedItems.indexOf(`${index + 1}`) > -1} />
<ListItemText primary={value} />
</MenuItem>
))
}
</Select>
)}
/>
<FormHelperText>{helperText}</FormHelperText>
</FormControl>
ここに載っている例を使ったらvalidationが効いたので、これをベースに問題を切り分けていく。
まつだけrulesのところをvalidateにして自分で処理書いたらいい感じにエラーハンドリングできるようになった
<FormControl
variant="outlined"
margin="dense"
className={styles.sort_control}
>
<Controller
name={name}
control={control}
defaultValue={selectedItems}
rules={{
validate: {
selected: () => (filterInfo.productCategoryIdList.length <= 0 ? '商品情報を入力してください' : ''),
},
}}
render={(prps) => (
<Select
{...prps}
multiple
value={selectedItems}
onChange={handleChange}
error={error}
renderValue={(selected) => (
<div className={styles.pulldown__chips}>
{
(selected as string[]).map((value) => (
<Chip key={value} label={items[parseInt(value, 10) - 1]} className={styles.pulldown__chip} />
))
}
</div>
)}
MenuProps={MenuProps}
margin="dense"
>
{items.map((value, index) => (
<MenuItem key={value} value={`${index + 1}`} dense>
<Checkbox checked={props.selectedItems.indexOf(`${index + 1}`) > -1} />
<ListItemText primary={value} />
</MenuItem>
))}
</Select>
)}
/>
<FormHelperText error={error}>{helperText}</FormHelperText>
</FormControl>
ちなみにコンポーネント側に渡している処理はこんな感じ。
もうちょっとキレイに書ける気もするけど、一旦これでおしまい。
<MultiplePulldown
name="productCategoryIdList"
items={productCategories}
selectedItems={filterInfo.productCategoryIdList}
handleChange={(e) => {
setFilterInfo({ ...filterInfo, productCategoryIdList: e.target.value as string[] });
}}
control={control}
rules={{
validate: {
selected: () => (filterInfo.productCategoryIdList.length <= 0 ? '商品情報を入力してください' : ''),
},
}}
error={Boolean(errors.productCategoryIdList && errors.productCategoryIdList.message)}
helperText={errors.productCategoryIdList && errors.productCategoryIdList.message}
/>
このスクラップは2021/03/11にクローズされました