How to set the field2 and field3 to required based on the field1 value in react

Question

 Schema.model({
    field1: StringType(),
    field2: StringType(),
    field3: StringType()
    })

return (
 <Form
            model={model}
          >
<FormControl name="field1" />
<FormControl name="field2" />
<FormControl name="field3" />
</Form>
)

How to set the field2 and field3 to required field?

What I'm trying to do is when field is equal to jake the field2 and field3 will be required. but when its not equal to jake then its not required.

I tried to use the onChange on the field1 but it doesn't work. also I tried the addRule in field2 & field3 but it doesn't work also.

addRule((value, data) => { 
 if (data.field1 ==='jake') {
 return true;
} return false;
}

I want to apply this in field2 and field3 StringType().isRequired('Required field') when the value in field1 is jake.

score 0 · Answer 1 · answered Jul 08 '21 at 11:16

0

Add rule looks correct to me, but if it's not working, maybe try this in you JSX:

  {this.state.field1 === 'jake'?
        <FormControl name="field2" required/>
        <FormControl name="field3" required/>
       :
       <FormControl name="field2" />
        <FormControl name="field3" />

and for field on onChange={e => this.setState({field1: e.target.value})}

Note: I am not sure if this would be the optimal way, but it should work.

answered Jul 08 '21 at 11:16

Odasaku

177
6
17

yes it display the error but when I try to remove the value jake on field1 then on the field2 when I try to input some value it still display the required message – Jul 08 '21 at 11:22
Then try using a function instead, that returns the input fields with the required attribute `if this.state.field === 'jake'` or the input fields without the required attribute in the else block and use it with the onChange event for the field1, and render the function in the JSX like so `{requiredOrNot}`. – Odasaku Jul 08 '21 at 13:33

score 0 · Answer 2 · answered Jul 08 '21 at 11:32

0

Sounds like an issue with the render cycle. How, exactly, did you implement changing the required attribute on change? You need to do it through a state variable so that react knows to re-render when it changes.

answered Jul 08 '21 at 11:32

Supperhero

911
1
7
24

it works when I use the state, but my issue now is how do I display the error message cause before I used like this. StringType().isRequired(); – Jul 08 '21 at 11:39

How to set the field2 and field3 to required based on the field1 value in react

2 Answers2