Friday, 24 April 2020

How to add validation message to React Material UI Autocomplete?

You can firnd Autocomplete textbox of material ui on this link
When you use this autocomplete inside form and you want to set validation error message on autocomplete then you have to put the attribute to  textfield inside the <Autocomplete> Tag
Here below some example code which is working on versions dependencies
"@material-ui/core": "^4.9.4",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.50",
"@material-ui/styles": "^4.9.0"



<Autocomplete
                  value={editcountry}
                  id="combo-box-demo"                 
                  options={countryList}
                  getOptionLabel={option => option.CountryName}
                  onChange={onCountryChange}
                  disableClearable
                  style={{ width: 300 }}
                  className={classes.textField}
                  renderInput={params => (                   
                    <TextField
                      {...params}
                      error={hasError("idCountryMaster")}
                      helperText={
                        hasError("idCountryMaster") ? formState.errors.idCountryMaster[0] : null
                      }
                      label="Country Master"
                      variant="outlined"
                    />
                  )}
                />