Adding errorText to individual Input rows of a FormField

[pradoz]

Hi all,

I am validating multiple entries of Input nested within a FormField. When there is an invalid entry in any of the Input rows, the error displays at the bottom of the FormField. Is it possible to associate the errorText with an individual row within the FormField?

My initial thought was to provide a key/index to the Input component, but as mentioned in #798, the key is associated with the FormField component and not the Input component

  const [s3Uris, setS3Uris] = useState<string[]>([''])
  const [s3ObjectUriError, setS3ObjectUriError] = useState<string | undefined>(undefined)

  const handleAddS3Uri = () => {
    setS3Uris([...s3Uris, ''])
  }

  const handleS3UriChange = (index: number, value: string) => {
    const newUris = [...s3Uris]
    validateS3Uri(value)
      ? setS3ObjectUriError(undefined)
      : setS3ObjectUriError('Invalid S3 Object URI. See the tooltip for more information')
    newUris[index] = value
    setS3Uris(newUris)
  }

And the FormField:

                    <FormField
                      label="Input S3 Object URI"
                      errorText={s3ObjectUriError}
                    >
                      {s3Uris.map((uri, index) => (
                        <Box key={index} margin={{ vertical: 'xs' }}>
                          <Input
                            key={index}
                            value={uri}
                            onChange={({ detail }) => handleS3UriChange(index, detail.value)}
                          />
                        </Box>
                      ))}
                        <Button variant="normal" onClick={handleAddS3Uri}>
                          + Add Row
                        </Button>
                    </FormField>

[pradoz]

It looks like the AttributeEditor playground example does something similar, but I'd like to omit the Key and just use the Value if possible

[jperals]

Hi,

You could wrap each input inside a form field, each with its own errorText but without label. The parent form field would keep the label.