0

I face a little problem with RSuite and schema error handling. Right now I can't translate error messages from Schema because Schema is written outside component, so I can't use hooks. Is it possible to translate error messages outside the component?

    const { StringType, DateType } = Schema.Types;
const model = Schema.Model({
    username: StringType().isRequired('FORM.ERR.REQUIRED'),
    password: StringType().isRequired('FORM.ERR.REQUIRED')
});

export default function login() {
    const [formValue, setFormValue] = useState();
    const { t } = useTranslation()
    const form = useRef();

const formSubmit = () => {
    if (form.current.check()) {
        console.log(formValue);
    }
}

return (
    <section className="LOGIN">
        <div className="LOGIN__container">
            <Form
            className="LOGIN__container-form"
                model={model}
                onChange={formValue => setFormValue(formValue)}
                onSubmit={() => formSubmit()}
                ref={form}>
                <FormGroup>
                    <FormGroup>
                        <FormControl placeholder="Username" name="username" style={{width: '100%'}} />
                    </FormGroup>
                    <FormGroup>
                        <FormControl placeholder="Password" name="password" type="password" style={{width: '100%'}} />
                    </FormGroup>
                </FormGroup>
                <ButtonToolbar>
                    <Button appearance="primary" type="submit">
                        {t('COMMON.SUBMIT')}
                    </Button>
                </ButtonToolbar>

            </Form>
        </div>
    </section>
)

} That's the whole component

Evald Doda
  • 63
  • 1
  • 2
  • 6

1 Answers1

0

of course you can,but not use hooks,for example,I use React-intl.

import { FormattedMessage } from 'react-intl';

export const formatMessage = (id: string, values: BaseObject = {}): any => {
  return <FormattedMessage id={id} values={values} />;
};

you can use this function to return a React.ReactNode.like this

const model = Schema.Model({
    username: StringType().isRequired(formatMessage('FORM.ERR.REQUIRED')),
    password: StringType().isRequired(formatMessage('FORM.ERR.REQUIRED'))
});
IamStillLongTime
  • 1