Как сделать обязательным автозаполнение поля материала UI?

Я пробовал несколько способов сделать поле автозаполнения пользовательского интерфейса материала требуемого типа, но я не получаю желаемого поведения. Я инкапсулировал свое поле внутри формы хука реакции <Controller/>, но безуспешно. Я хочу вызвать сообщение «Поле обязательно» при отправке, когда в поле ничего не добавлено.

Ниже приведен фрагмент кода, я не удалял комментарии, чтобы другим стало немного легче понять подход, которого я придерживался ранее -

  <Controller
        name="displayName"
        as={
          <Autocomplete 
                  value={lists}
                  multiple
                  fullWidth
                  size="small"
                  limitTags={1}
                  id="multiple-limit-lists"
                  options={moduleList}
                  getOptionLabel={(option) => option.displayName}
                  renderInput={(params,props) => {
                   return (
                      <div>
                        <div className="container">
                          <TextValidator {...params} variant="outlined" label="Display Name*" className="Display Text" 
                            name="displayName"  id="outlined-multiline-static" 
                            placeholder="Enter Display-Name" size="small"
        onChange={handleDisplay}
         // validators={['required']} this and below line does throw a validation but the problem is this validation stays on the screen when user selects something in the autocomplete field which is wrong.
        // errorMessages={['This field is required']} 
        // withRequiredValidator
        
                            />
                        </div>
                      </div>
                    )
                  }}
                  />
        }
        // onChange={handleDisplay}
        control={control}
        rules={{ required: true }}
        // required
        // defaultValue={options[0]}
        />
        <ErrorMessage errors={errors} name="displayName" message="This is required" />

reactjs material-ui react-hook-form
person Pushpendra Yadav    schedule 29.06.2020    source источник
comment
он, вероятно, по умолчанию возвращает пустой объект, почему бы не использовать функцию validate.   -  person Bill    schedule 30.06.2020

Ответы (3)


arrow_upward
3
arrow_downward

Я попытался использовать встроенное текстовое поле, необходимое для автозаполнения, и оно работает как шарм. Может быть, вы можете использовать это как ссылку.

<Autocomplete
    renderInput={(params) => {
        <TextField {...params} required />
    }
    // Other codes
/>
person stvin    schedule 26.10.2020

arrow_upward
3
arrow_downward

Вы можете использовать следующую логику, чтобы все заработало. Хотя это может быть не лучшим решением, но работает.

<Autocomplete 
    renderInput={(params) => (
        <TextField
            {...params}
            label={value.length === 0 ? title : title + " *"} //handle required mark(*) on label 
            required={value.length === 0}
        />
    )}
/>
person Nikhil Waykos    schedule 07.02.2021
comment
Хороший и простой трюк. - person Aravind Reddy; 14.07.2021

arrow_upward
0
arrow_downward

Поскольку вы визуализируете <TextValidator>, вы должны применить обязательный (обязательный) атрибут к этому компоненту, а не к <AutomComplete>.

person suresh    schedule 25.03.2021