Redux form Validation Field не работает правильно - PullRequest
Новая
       22

Redux form Validation Field не работает правильно

0 голосов
/ 26 апреля 2019

Я использую избыточную форму в своем приложении, и у меня возникла проблема при попытке проверки на уровне проверки поля.Я пытаюсь использовать функцию синхронной проверки в reduxForm().

Ранее все работало правильно, я использую значение по умолчанию submit при нажатии кнопки вместо передачи onSubmit, потому что мне нужно передать некоторые реквизиты в onSubmit, и я решил использовать из mapDispatchToProps напрямую.Теперь при сохранении его проверка не передает ошибку в поле 

export const validate = ({name})=> {
    let errors = {}

    if (!name)
        errors.name = <FormattedMessage id={'common.error.empty'} />

    return errors
}

const returnToList = ({history, filter}) => history.push({pathname: '/setup/rooms', state: filter})

export class AddOrEditRoom extends Component {
    render = () => {
        let {intl, submit, onSubmit, handleSubmit,  filter, currentRoomValues} = this.props
        debugger

        const actions =
            <Fragment>
                <Button
                    variant='contained'
                    name='cancel'
                    onClick={() => returnToList(this.props)}
                >
                    <FormattedMessage id='common.cancel' />
                </Button>
                <Button
                    name='save'
                    onClick={() => onSubmit({currentRoomValues, filter})}
                    /*onClick={submit} - previous implementation, but I need pass props `filter` to onSumbit*/
                >
                    <FormattedMessage id='common.save' />
                </Button>
            </Fragment>

        return (
            <Page title={<FormattedMessage id='rooms.roomInfo' />} actions={actions} footer={actions}>
                {isLoadingInProgress && <LinearProgress variant='indeterminate' />}
                <form onSubmit={handleSubmit}>
                                        <Field
                                            required
                                            name='name'
                                            label={<FormattedMessage id='name' />}
                                            component={renderTextField}
                                        />
                </form>
            </Page>
        )
    }
}

export const mapStateToProps = (state, {match: {params: {roomId}}}) => {
    let initialValues = roomId && state.entities.rooms[roomId]
    const form = `room-${roomId}`
    const selector = formValueSelector(form)

    return {
        roomId,
        initialValues,
        form,
        filter: filterSelector(state.rooms),
        currentRoomValues: {...initialValues, name: selector(state, 'name')},
    }}

export const mapDispatchToProps = (dispatch, {match: {params: {roomId}}, history}) => ({
    init: () => dispatch(RoomActions.get(roomId)),
    onSubmit: async ({currentRoomValues, filter}) => {
        const {success, response} = await dispatch(RoomActions.createOrUpdate({...currentRoomValues, ...getTrimmedStringFields(currentRoomValues)}))

        if (!success) {
            const statusCode = response?.result?.statusCode
            const error = {}

            if (statusCode === ValidationStatus.DuplicateName)
                error.name = <FormattedMessage id='rooms.duplicateName' />
            else
                error._error = <FormattedMessage id='rooms.failedMessageWithStatusCode' values={{statusCode}} />

            throw new SubmissionError(error)
        }

        returnToList({history, filter})
    },
})

export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    reduxForm({validate, enableReinitialize: true, keepDirtyOnReinitialize: true}),
    initializable,
)(AddOrEditRoom)

renderTextField 

export const renderTextField = ({input, label, meta: {touched, error}, ...other}) =>
    <TextField
        label={label}
        error={!!(touched && error)}
        helperText={!!(touched && error) && error}
        {...input}
        {...other}
    />

1 Ответ

0 голосов
/ 26 апреля 2019

Итак, я обнаружил проблему, мне просто нужно передать собственную функцию в handleSubmit кнопке, и она запустит проверку, как синхронизацию, так и асинхронность, и, если форма верна, она вызовет this.props.onSubmit(данные) с содержанием данных формы.onClick={handleSubmit(room => onSubmit({currentRoomValues, filter})}

...