Why pristine props does not disable button for both Redux-Fields

Question

I have 2 Fields and a submit button. The 2 Fields are controlled by redux-form. Both Fields need to be filled before pressing the submit button, so I use the pristine and submitting props to disable the button if the 2 Fields are empty. The problem is that if I fill one of the 2 Fields, the button becomes enabled but what I want it the button to be enabled after filling both Fields. What am I doing wrong?

<form onSubmit={handleSubmit(this.submit)}>
 <div id="product-searchbar">
  <Field
   component="TextField"
   type="text"
   name="productId"
   placeholder="Enter a name product..."
  />
 </div>
 <Field
  component="Dropdown"
  header="Choose a product"
  name="type"
  items={[
   { value: "product a", id: 1 },
   { value: "product b", id: 2 }
  ]}
 />
 <button
  type="submit"
  disabled={pristine || submitting}
 >
  <SaveIcon />
 </button>
</form>

let ComponentContainer= reduxForm({
 form: "formProduct"
})(ComponentWrapped);

Answer 1

pristine means "none of the fields" value properties differ from their initial properties", so as soon as one field has a value different than the values you initialized, pristine will be set to false. You use this variable to enable the reset() function.

What you want to do is to make these 2 fields mandatory. There's two way to do it: Either you just set these two fields as required, like this:

<Field
   component="TextField"
   type="text"
   name="authId"
   placeholder="Enter an auth-Id..."
   required
/>

Or you follow this Field-Level Validation Example and add a required validation:

const required = value => (value ? undefined : 'Required');

render() {
  return (
    <form onSubmit={handleSubmit(this.submit)}>
      <div id="authId-searchbar">
        <Field
          component="TextField"
          type="text"
          name="authId"
          placeholder="Enter an auth-Id..."
          validate={required}
        />
      </div>
      <Field
        component="Dropdown"
        header="Choose a credential type"
        name="type"
        items={[
          { value: "product a", id: 1 },
          { value: "product b", id: 2 }
        ]}
        validate={required}
      />
      <button
        type="submit"
        disabled={pristine || submitting}
      >
        <SaveIcon />
      </button>
    </form>
  );
}