Manuell redux-Formular Feld und/oder Formularfehler

Question

Ich bin mir bewusst, dass, wenn Sie eine SubmissionError von Ihrer handleSubmit() Funktion werfen, der redux-form Code wird die Fehler der entsprechenden Felder und/oder das Formular selbst ausfüllen.

Doch das API von Feld/Paßfehlern Einstellung fest Paare unsere Implementierung von handleSumbit() einen Anrufer des redux-form Code zu sein (die die SubmissionError Ausnahmebehandler enthält).

Mein Anwendungsfall ist etwas zu haben, etwa so:

function asyncActionDispatcher(values) {          
    return (dispatch, getState) => {           
    // I'm using getState, which is not accessible in handleSubmit()   
    // But I'd also like to be able to set errors on the form fields and/or the 
    // form.                 
    };                   
}                    

function handleSubmit(values, dispatch) {          
    dispatch(                 
    asyncActionDispatcher(values)            
);                   
} 

ich kein SubmissionError in asyncActionDispatcher() werfen kann, weil sie von redux und nicht redux-form genannt wird.

Hat redux-form eine andere API, um Fehler in Feldern/Formular zu setzen?

Answer 1

Ja, tut es.

Sie können validate und asyncValidate Requisiten verwenden, um Validiererfunktionen für die Werte Ihres Formulars festzulegen (synchron bzw. asynchron).

validate sollte eine Funktion sein, die entweder ein leeres Objekt zurückgibt, wenn Validierungen geben oder ein Objekt Detaillierung Validierungsfehler in Form { someField: 'some error', otherField: 'other error' }

asyncValidate auf der anderen Seite sollte eine Promise zurückzugeben, die normalerweise gelöst, wenn Validierungen passieren, oder dass wird mit einem Objekt zurückgewiesen, das Validierungsfehler (siehe oben) beschreibt, wenn Validierungen nicht bestanden werden.

handleSubmit ist so ausgebildet, dass sie sowohl synchrone als auch asynchrone Validierungen ausgeführt wird, bevor onSubmit Aufruf, wenn Sie also auf validate und asyncValidate festgelegt haben, sollten diese Fehler in der Form/Felder automatisch und ohne zusätzliche Arbeit erscheinen.

Hoffe, das hilft!

Update:

Sie könnten auch bis asyncActionDispatcher beendet warten nur und weiterhin die Einreichung oder ablehnen mit einem SubmissionError je nachdem, was die Ergebnisse von ihm waren.

function asyncActionDispatcher(values) { 
    return (dispatch, getState) => { 
    if (success) { 
     return Promise.resolve('success') 
    } else { 
     return Promise.reject('error') 
    } 
    } 
} 

function onSubmit(values, dispatch) { 
    // dispatch whatever action you need to dispatch 
    return dispatch(asyncActionDispatcher(values)) 
    .then(() => { 
     // i guess you need to do your actual submitting here 
    }) 
    .catch(error => { 
     return new SubmissionError({ _error: 'whatever you want here' }) 
    }) 
} 

// and in the component 
<form onSubmit={ handleSubmit(onSubmit) }> ... </form> 

Quellen: Redux-Form docs, wrapped component props documentation, synchronous validation example, asynchronous validation example

Answer 2

Ihre handleSubmit() wie so genannt wird:

handleSubmit(values, dispatch, props) 

... wo eine der Eigenschaften dieses props Objekt ist eine stopSubmit() Funktion .

Das ist, was Sie verwenden möchten, wo es ist API ähnlich wie here beschrieben:

stopSubmit(form:String, errors:Object) 
// Flips the submitting flag false and populates submitError for each field. 

Sie würden die einzigartige form Stringbezeichner angeben müssen, wenn diese Funktion selbst importieren und verwenden, aber wenn Sie Verwenden Sie die Version nach handleSubmit() (über das Objekt props), dann müssen Sie das Argument für den ersten Parameter nicht angeben.