redux form：空白フィールドを送信するとエラーが発生する

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)); 
     }); 
    } 
}