CODEWITHSUNDEEP
reactjsmaterial-ui
kzharas210
kzharas210

Reputation: 500

How to apply a pattern to material ui input?

How do I apply a regex pattern to Input to validate without using onChange?

For example if I want it to accept exactly 13 digits number ^(\d{13})?$ having type="text"

<Input id="number" type="text" />

Upvotes: 8

Views: 16590

Answers (2)

Mehrnaz.sa
Mehrnaz.sa

Reputation: 386

material ui, has a property for its input called: inputProps, its an object that you can pass the attributes you want to assign to the input element itself, so you can give it {pattern: 'your pattern'} and it will get applied to the input, as a second way, you can try maskedInputs like this: 

      function TextMaskCustom(props) {
        const { inputRef, ...other } = props;

        return (
          <MaskedInput
            {...other}
            ref={inputRef}
            mask={[
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/
            ]}
            placeholderChar={"\u0000"}
            showMask
          />
        );
      }

and then pass this to the material input as a prop and tell it to use this masked input instead of its default input component:

      <Input
        value={textmask}
        onChange={this.handleChange("textmask")}
        id="formatted-text-mask-input"
        inputComponent={TextMaskCustom}
      />

Upvotes: 4

Ranielle Canlas
Ranielle Canlas

Reputation: 634

<MaskedInput
      {...other}
      ref={inputRef}
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
      placeholderChar={'\u2000'}
      showMask
    />

you can use the mask property, for better information, visit the docs.

https://material-ui.com/demos/text-fields/#formatted-inputs

Upvotes: 0

Related Questions