小编Pus*_*dav的帖子

我尝试了几种方法来使材料 UI 的自动完成类型字段成为必需，但我没有得到我想要的行为。我已经将我的领域封装在 react hook 形式中，<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 …

我有一个可恢复的 Material UI 文本字段，我将其与我的 formik 表单一起使用 -

<Fieldname="reportType"
    label="Report Type"
    disabled
    as={TextFieldOutLined}
/>

我想让我成为reportType残疾人。当我像上面那样将禁用传递给我时，TextFieldOutLined它不起作用。

下面是我的TextFieldOutLined片段。

const TextFieldOutLined = ({ label, disabled, ...props }) => {
    const classes = useStyles();

    const [field] = useField(props);
    return (
        <TextField
            className={classes.formControl}
            {...field}
            {...disabled}