CODEWITHSUNDEEP
javascriptreactjsredux-form
Edv Beq
Edv Beq

Reputation: 1000

How to disable a Field in redux-form?

I am simply trying to disable a field in redux-form as shown below but it does not seem to have any effect. This is redux-form version 7.4.2.

  <Field
    name="mu"
    type="text"
    component={renderField}
    label="DRIFT FUNCTION [ μ(X(t),t) ]:"
    disabled={true} 
    validate={[required]}
  />

Also 

  <Field
    name="mu"
    type="text"
    component={renderField}
    label="DRIFT FUNCTION [ μ(X(t),t) ]:"
    props={{ disabled: true }}
    validate={[required]}
  />

Any help please

Upvotes: 11

Views: 17163

Answers (4)

DevCo
DevCo

Reputation: 479

If you are working with redux-Form given code can work as @Vanun explained 

<Field
    name="Name"
    component="fieldset"
    type="text"
    disabled={true}
  />

Upvotes: 1

Vanuan
Vanuan

Reputation: 33422

Apparently, it works if you provide primitive react components rather than functions:

      <Field
        name="firstName"
        component="input"
        type="text"
        disabled={true}
        placeholder="First Name"
      />

Edit Redux Form - Simple Example

So I think the problem in your case is inside the renderField function you have not shown.

Upvotes: 5

Idan Dagan
Idan Dagan

Reputation: 11585

You can pass the props object:

props : object [optional]: Object with custom props to pass through the Field component into a component provided to component prop. This props will be merged to props provided by Field itself.

// outside your render() method
const renderField = field => (
  <div>
    <input
      {...field.input}
      disabled={field.disabled} // you'll use it here
      type="text"
    />
  </div>
);

// inside your render() method
<Field
  name="myField"
  props={{
    disabled: true, // like this
  }},
  component={renderField}
/>

Upvotes: 10

nishant
nishant

Reputation: 2606

input={{ disabled: true, }}

add this to your Field tag

Upvotes: 4

Related Questions