Question

我想提交未请求/可选字段。只验证了几个字段。因此，如果我只提交请求和验证的字段，则submitFailed设置为true，不会显示任何错误消息。如果我提交所有字段，表单提交正确。这是我的代码：

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import classnames from 'classnames'

const validate = values => {
    const errors = {};
    if (!values.vehicleNumber) {
        errors.vehicleNumber = 'Questo campo è obbligatorio'
    }
    if (!values.vehicleKm) {
        errors.vehicleKm = 'Questo campo è obbligatorio'
    }
    if (!values.vehicleAssicurationEnd) {
        errors.vehicleAssicurationEnd = 'Questo campo è obbligatorio'
    }
    if (!values.vehicleTaxEnd) {
        errors.vehicleTaxEnd = 'Questo campo è obbligatorio'
    }
    if (!values.vehicleRevisionEnd) {
        errors.vehicleRevisionEnd = 'Questo campo è obbligatorio'
    }
    if (!values.vehicleType) {
        errors.vehicleType = 'Questo campo è obbligatorio'
    }
    return errors
};

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div className={classnames({'has-error': touched && (error), 'form-group': true})}>
        <label>{label}</label>
        <input {...input} type={type} className="form-control" />
        <div className="text-help text-danger">{touched ? error : ''}</div>
    </div>
);

const renderSelectField = ({ input, label, meta: { touched, error } }) => (
    <div className={classnames({'has-error': touched && (error), 'form-group': true})}>
        <label>{label}</label>
        <select {...input} className="form-control">
            <option></option>
            <option value="furgone">Furgone</option>
            <option value="passo-lungo">Furgone passo lungo</option>
            <option value="cassonato">Centinato</option>
            <option value="motrice">Motrice</option>
            <option value="motrice-sponda">Motrice con sponda</option>
        </select>
        <div className="text-help text-danger">{touched ? error : ''}</div>
    </div>
);

const VehicleForm = (props) => {
    const {handleSubmit, submitted, pristine, vehicleNumber, handleDeleteVehicle} = props;

    return (
        <div>
            <h1 className="text-center margin-bottom">{(vehicleNumber == null) ? "Nuovo automezzo" : vehicleNumber}</h1>
            <form onSubmit={handleSubmit} className="col-md-6 col-md-offset-3">
                <Field name="vehicleName" label="Nome automezzo" component={renderField} type="text" />
                <Field name="vehicleNumber" label="Targa*" component={renderField} type="text" />
                <Field name="vehicleKm" label="Chilometri aggiornati*" component={renderField} type="number" />
                <Field name="vehicleFuel" label="Carburante" component={renderField} type="text" />
                <Field name="vehicleAssicurationEnd" label="Scadenza assicurazione*" component={renderField} type="date" />
                <Field name="vehicleAssicurationName" label="Nome assicurazione" component={renderField} type="text" />
                <Field name="vehicleAssicurationId" label="Codice pratica assicurativa" component={renderField} type="text" />
                <Field name="vehicleTaxEnd" label="Scadenza bollo*" component={renderField} type="date" />
                <Field name="vehicleRevisionEnd" label="Scadenza revisione*" component={renderField} type="date" />
                <Field name="vehicleType" label="Tipologia*" component={renderSelectField} />
                <button type="submit" disabled={pristine || submitted} className="btn btn-primary">Salva</button>
                <button type="button" className="btn btn-danger pull-right" onClick={handleDeleteVehicle}>Elimina</button>
            </form>
        </div>

    );
};

export default reduxForm({
    form: 'newVehicleForm',
    validate
})(VehicleForm);

Answer 1

我解决了这个问题。当我提交空值时，我需要检查它并添加一个空字符串，否则服务器拒绝它。

在我的行动发送中：

export function newVehicle(values, userID, branchID) {
    return dispatch => {
        const ref = firebase.database().ref('vehicles').child(userID).child(branchID).push();
        ref.set({
            vehicleName: (values.vehicleName ? values.vehicleName : ""),
            vehicleNumber: values.vehicleNumber,
            vehicleFuel: (values.vehicleFuel ? values.vehicleFuel : ""),
            vehicleKm: values.vehicleKm,
            vehicleAssicurationEnd: values.vehicleAssicurationEnd,
            vehicleAssicurationName: (values.vehicleAssicurationName ? values.vehicleAssicurationName : ""),
            vehicleAssicurationId: (values.vehicleAssicurationId ? values.vehicleAssicurationId : ""),
            vehicleTaxEnd: values.vehicleTaxEnd,
            vehicleRevisionEnd: values.vehicleRevisionEnd,
            vehicleType: values.vehicleType
        }).then(()=>{
            dispatch(newVehicleButtonDismissed());
        }).catch((error)=>{
            dispatch(errors(error));
        });
    }
}

redux表单：提交空白字段导致错误

1 个答案: