by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    David Khourshid
    @davidkpiano
    I'd recommend onBlur @fingermark
    also look at tweaking shouldComponentUpdate in the component that contains LocalForm
    Antonio Pol
    @AntonioPol06_twitter
    Hi guys
    I started to use RRF and I have some doubts, I want to set initial values
    I added my combineForms into a deep object with key: 'form'
    import { combineForms } from 'react-redux-form';
    const initialUserState = {
      firstName: 'my initial value',
      email: '',
      password: '',
      comfirmPassword: ''
    };
    
    export default combineForms({
        user: initialUserState
    }, 'form');
    When I call Form component will works and send data correctly, but initialvalue 'my initial value' is not appeared. Any suggestion?
    Antonio Pol
    @AntonioPol06_twitter
    And my component contains:
    class UserRegister extends React.Component {
    
      constructor(props) {
        super();
      }
    
      handleSubmit(user) {
        let { dispatch } = this.props;
    
        console.log(this.props);
    
        // Do whatever you like in here.
        // You can use actions such as:
        // dispatch(actions.submit('user', somePromise));
        // etc.
      }
    
      render () {
        let form = this.props.form;
    
        return (
          <div>
              <Counter />
            <h1>MI FORMULARIO</h1>
            <Form 
              model="form.user"
              onSubmit={(user) => this.handleSubmit(form.user)}
              >
    
    
              <label>First name:</label>
              <Control.text
                model=".firstName"
                type="text"
                validateOn="change"
                validators={{
                  required: checkEmpty,
                  otro: checkEmpty
                }}
              />
              <Errors
                className="errors"
                model=".firstName"
                messages={{
                  required: 'Required',
                  otro: 'otro'
                }}
              />
    
              <label>Email:</label>
              <Control.text model=".email" />
    
              <label>Password:</label>
              <Control.text model=".password" />
    
              <label>Confirm Password</label>
              <Control.text model=".confirmPassword" />
    
              <button type="submit">
                Finish registration {form.user.firstName}!
              </button>
            </Form>
          </div>
        )
      }
    
    };
    
    const mapStateToProps = (state) => {
      return state.userRegister
    };
    
    const mapDispatchToProps = (dispatch) => {
      return bindActionCreators(registerActions, dispatch);
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(UserRegister);
    And the button submit contains correctly the initial value, but initial value is not appeared into the control model=".firstName"
    David Khourshid
    @davidkpiano
    @AntonioPol06_twitter how is your store defined? It's best if I see a fully reproducible example
    Antonio Pol
    @AntonioPol06_twitter
    @davidkpiano now it works, the problem was the deep string that was wrong. Thanks a lot!!!
    fingermark
    @fingermark
    if I dispatch actions.setFieldErrors('model', {username: ['error']}); changing that field never clears that error
    i'm trying to show field errors returned from the server
    or maybe i should be using setErrors, but it doesn't allow you to batch them, does it?
    fingermark
    @fingermark
    the field is optional
    which means it's probably not getting validated on again
    it does have a maxLength validator, though
    yeah, if i do an invalid length then it shows 'error' and 'invalid length'
    and once i fix the length, just 'error'
    fingermark
    @fingermark
    ok, i got around this by doing {username: { server: 'error' } } and then on the control component adding a validator that does { server: () => true }
    David Khourshid
    @davidkpiano
    you can also actions.setErrors('model', { something: true }, { async: true }) which will tell RRF that it's an async error, which should go away when you change it.
    fingermark
    @fingermark
    @davidkpiano thanks a lot. that's much nicer. I had to use setFieldsErrors, though, because it wasn't showing an error message otherwise
    Basheer A Radman
    @ba2015sheer_twitter
    Thank you @alshamiri2
    Lukas Stuart-Fry
    @lstuartfry
    Hi @davidkpiano . I wanted to see if you got any notification of the issue I just opened on the repo, #884 . I only ask because I’m subscribed to the repo, and normally get an email any time a new issue is open, but I haven’t received one yet for this issue. I opened the issue yesterday. Absolutely no rush, just want to see if it made its way over to you.
    David Khourshid
    @davidkpiano
    Hey, yeah I saw it @lstuartfry no worries. I'm sure it's a weird race condition issue, will have to look deeper into it.
    Lukas Stuart-Fry
    @lstuartfry
    Much appreciated David! No rush at all, i’m using an older version of RRF in the meantime.
    Felix Henninger
    @FelixHenninger

    Hi everyone! I'm stuck and probably making some stupid mistake -- if you could spare a moment, I'd really appreciate a hint.

    In a nutshell, I'd like to build a basic component that shows some data in a <LocalForm /> and provides an update callback, like so:

    const MyForm = ({ data, onChange }) =>
      <LocalForm
        initialState={{ data }}
        onChange={ onChange }
      >
        <Control model="local.data" />
      </LocalForm>
    This is wrapped by a component that's connected to the store and which provides data as a prop, based on the current state.
    My problem is that the data inside the form control doesn't get updated when the app state changes, even though the component is clearly rerendered.
    Felix Henninger
    @FelixHenninger
    I'm guessing this is by design, and I haven't fully understood the mechanism, but I'd really like to figure this out. Any hints would be much appreciated. Thanks a lot!
    (oh, and a few more notes: There is more than one LocalForm on the page, but the result doesn't change if I remove the other one)
    (also, I'm running RRF 1.14.1 and react-redux 4.4.8)
    Felix Henninger
    @FelixHenninger
    Here's an example that's as minimal as I can make it: https://codepen.io/anon/pen/ayqjZR?editors=0010
    The weird thing is that I've had this working before, and must have broken it through refactoring.
    Felix Henninger
    @FelixHenninger
    Hmm, so I'm guessing that I might need a manual shouldComponentUpdate method somewhere ... I'll see if that helps.
    ... or forceUpdate?
    Felix Henninger
    @FelixHenninger
    Ok, I'm giving up for tonight, trying again tomorrow. If any of you could spare a moment, the tiniest pointers or hints would be massively appreciated!
    Felix Henninger
    @FelixHenninger
    Just a quick update: I hacked together a solution for this, by dispatching a change action to update the form's data from a wrapping component's componentWillUpdate method.
    This, however, strikes me as very un-react-like. Is there a better solution?
    Sean Yu
    @seanyu4296
    hi is it possible to not run immediately a certain validator of a <Form> component? an example of this is you dont want to tell your user his password does not match yet while he just started typing in the password field? @davidkpiano
    Sean Yu
    @seanyu4296
    is it also possible that the Control component be aware that it has an error. I want to make the input border red when on error. if so can you guys help me out :worried:
    Sean Yu
    @seanyu4296

    okay after looking through the docs and some issues posted by people i think this is the solution for my question number 2

    ```

    <Control.text model="myForms.user.email" placeholder="username" mapProps={{ withError: ({ fieldValue }) => {
    if (fieldValue.touched) {
    return !fieldValue.valid;
    }
    return false;
    }
    }}
    validators={{
    required: val => val && val.length
    }}
    validateOn="change"
    />
    ```the solution you @davidkpiano gave here davidkpiano/react-redux-form#441

    automatically sets the withError props to true on render so i added the fieldValue.touched if statement so that it is not automatically set to true on render not sure if that's correct way to go @davidkpiano . do you have any suggestions @davidkpiano ?
    Felix Henninger
    @FelixHenninger
    Just as a quick update to my posts above, I woke up today and remembered the key prop, which solves all my issues magnificently. d'oh!
    Sorry for bothering you all with my public rubber-ducking, and thanks for this fantastic library! I'm really excited for the latest developments and v2!
    Ken Wallace
    @boaticus

    Anyone have an example of changing a control's disabled prop based on the modelValue of a checkbox control elsewhere in the form?

    Imagine a form with a checkbox and a text field (text field is disabled by default). If the checkbox is checked, then the text field should become editable.

    I can't seem to make it work.

    Ken Wallace
    @boaticus
    Alright, I got it worked out using normal setState pattern in the onChange handler on the checkbox.
    Sean Yu
    @seanyu4296
    There seems to be a weird bug when im using actions.merge with nested objects the validation for the nested object doesnt run correctly @davidkpiano please help :(
    kkashou
    @kkashou
    Could I get anyone's help on this ticket davidkpiano/react-redux-form#923
    David Khourshid
    @davidkpiano
    @seanyu4296 Can you please file a bug?