Formsy-Material-UI nicht validieren ersten Rendern

Question

Gibt es eine Möglichkeit, kann man erste Validierung von Komponenten in formsy-material-ui verzögern, so dass Validierungen wie isNotEmpty nicht auf das erste Render des Formulars feuern und die UX mess? Ich verwende kontrollierte Komponenten und setze deshalb bei jedem Rendering einen Wert aus dem Status.

<FormsyText 
    name="name" 
    value={this.state.name} 
    floatingLabelText="Name" 
    onChange={partial(this._changeInputValue, ['name'])} 
    validations={{ isNotEmpty }} 
    validationError="Field shoud not be empty" 
/> 

Answer 1

Ich brauchte diese Lösung auch. Ich habe den Quellcode von formsy-material-ui untersucht, und es scheint, dass das Textfeld seinen Wert direkt vor dem Mounten setzt. Aus diesem Grund wird das Feld beim Rendern als "geändert" (aka nicht ursprünglich) markiert, sodass der Validierungsfehler angezeigt wird.

Wie auch immer, ich schrieb eine hackish Lösung mit einer Komponente höherer Ordnung. Ich habe nur mit Textfeldern getestet, sollte aber mit allen Feldern arbeiten, die dieses Problem haben. Das Kernkonzept: Wenn das Formularfeld keine "validationErrors" -Stütze hat, werden keine Fehler angezeigt.

import React, { Component, PropTypes } from 'react'; 

export const preventFirstValidation = (FormsyField) => { 
    return class extends Component { 
    static propTypes = { preventFirstValidation: PropTypes.bool }; 
    static defaultProps = { preventFirstValidation: true }; 

    constructor(props) { 
     super(props); 
     this.state = { isChanged: false }; 
    } 

    render() { 
     const { preventFirstValidation, ...fieldProps } = this.props; 
     return (
     <FormsyField 
      {...fieldProps} 
      onChange={(evt, val) => { 
      if (!this.state.isChanged) this.setState({ isChanged: true }); 
      if (this.props.onChange) this.props.onChange(evt, val); 
      }} 
      validationErrors={(this.state.isChanged || !preventFirstValidation) ? this.props.validationErrors : undefined} 
     /> 
    ); 
    } 
    }; 
}; 

Wie man es verwendet:

import { Form } from 'formsy-react'; 
import FormsyTextField from 'formsy-material-ui/lib/FormsyText'; 

const TextField = preventFirstValidation(FormsyTextField); 

const MyForm =() => (
    <Form> 
    {/* You're using the transformed field, exactly like before */} 
    <TextField 
     name = "some_field" 
     validationErrors={{ isRequired: 'This is really required!' }} 
     required 
     preventFirstValidation={ /* you can enable or disable this feature */ } 
    /> 
    </Form> 
);