2016-08-10 2 views
0

Wie kann ich Synchronisierungsvalidierungsfehler für meine Radiogruppe anzeigen, wenn ich die Version v6 von redux-form verwende? Eine Option wäre, mehrere renderField-Funktionen zu erstellen, bei denen nur eine (die letzte) die Fehler anzeigen würde. Ich habe es zur Zeit Setup wie folgt aus:Synchronisierungsvalidierung für eine Radiogruppe (v6)

const renderField = ({ input, meta: { touched, error } }) => (
    <span> 
    <input 
     {...input} 
    /> 
    { 
     touched && 
     error && 
     <div> 
      {error} 
     </div> 
    } 
    </span> 
); 

// Form-component 
// I loop trough multiple values 

<Field 
    type="radio" 
    component={renderField} 
    id={`${field.name}-${value}`} 
    value={value} 
    name={field.name} 
/> 

<Field 
    type="radio" 
    id={`${field.name}-${value}`} 
    value={value} 
    name={field.name} 
/> 

Auf diese Weise lassen sich die Fehler mehrfach dargestellt (für jeden Wert). Ich könnte eine zusätzliche Requisite übergeben, wenn es der letzte Wert ist, um die Fehler nur für dieses Feld zu aktivieren. Obwohl das funktionieren würde, fühlt es sich irgendwie gemein an.

Antwort

1

Dies ist eine interessante Frage. Eine andere Möglichkeit wäre, eine Komponente zu schreiben, die nur für Renderfehler zuständig ist.

const renderError = ({ meta: { touched, error } }) => 
    touched && error && <div>{error}</div> 

Dann, nachdem Sie Ihre Radio-Buttons gemacht hatte, konnte man ein tun:

<Field name={field.name} component={renderError}/> 
Verwandte Themen