How to get unmasked value from MaskedTextField - FluentUI

Question

I'm using MaskedTextField component from Microsoft FluentUI library. I'm trying to get unmasked value from the component but no success. I tried both controlled component approach by passing value to props, and uncontrolled component approach by passing defaultvalue to props; and inspected the component properties in OnChange event handler but I found no property that stores the unmasked value.

Am I doing the right way? is there any workaround?

Thanks!

score 0 · Answer 1 · answered Jun 03 '20 at 21:40

Using the imperative API, it's possible to get the unmasked value. One important caveat from the docs:

The value of all filled format characters or undefined if not all format characters are filled

Here's an example that pulls the value when a button is clicked:

const TextFieldBasicExample: React.FunctionComponent = () => {
  const [val, setVal] = React.useState("");
  const [fetchedValue, setFetchedValue] = React.useState("");
  const ref = React.useRef(null);
  const fetchValue = React.useCallback(() => {
    setFetchedValue(ref.current.value);
  }, [setFetchedValue, ref]);
  const obj = {val, fetchedValue};
  return (
    <>
   <MaskedTextField ref={ref} label="With input mask" mask="m\ask: (999) 999 - 9999" value={val} onChange={(_, theVal) => setVal(theVal)} />
<button onClick={fetchValue}>Get value</button>
   <pre>{JSON.stringify(obj, null, 2)}</pre>
    </>
  );
};

(full working example)

If this API doesn't meet your needs, it's probably worth opening an issue, as there are several straightforward ways this could be improved.

How to get unmasked value from MaskedTextField - FluentUI

1 Answers1