Upper case only textfield and validation

Forge Forge UI Kit and Custom UI
1

Hi, I would like to do two things.

  1. create a text field that transforms all input into upper case letters while typing
  2. validate the content of the text field against some condition while typing

I have tried to add onInput={(e) => console.log("changing case")} which works with the input form fields but did not have luck with that. Any ideas on how I could accomplish this? Sorry if this is obvious, I am new to React.

2

Here is a code that might helps, I didn’t test it but you see the idea.
Here we have the validate and also transform text to upper case.

<Field
  name="username"
  defaultValue=""
  label="User Name"
  validate={(value) =>
    value && value.length < 4 ? 'TOO_SHORT' : undefined
  }>
  {({ fieldProps, error }) => (
    <>
      <TextField
        {...fieldProps}
        onChange={(e) => {
          const upperCaseValue = e.target.value.toUpperCase();
          fieldProps.onChange(upperCaseValue);
        }}
      />
      {error === 'TOO_SHORT' && (
          <ErrorMessage>
            Username needs to be more than 4 chars
          </ErrorMessage>
      )}
    </>
  )}
</Field>
3

Thanks @nhac.tat.nguyen I will try that. Just one question. Where did you import the Field component from? is this from the atlaskit?

4

All of them come from Atlaskit:

import TextField from '@atlaskit/textfield';
import TextArea from '@atlaskit/textarea';
import Form, { Field } from '@atlaskit/form';
5

Unfortunately, that did not work. What I came up with that does work though is the following:

<Field        
        validate={(value) => validateNameOrKey(Project.validKey, value)}
        transform={(e:any)=>return e.target.value.toUpperCase()}
      >
        {({ fieldProps, error }) => (
            <Textfield {...fieldProps} value={fieldProps.value} ></Textfield>
        )}
</Field>