bietkul / react-reactive-form

Angular like reactive forms in React.
MIT License
309 stars 32 forks source link

submitted field not updating #64

Closed saty932 closed 3 years ago

saty932 commented 4 years ago

I am submitting form but value of form submitted not updating.

         <div class="modal-body">
                    <div class="form_1">
                      <div class="head_modal">
                        <h3>Let’s Talk</h3>
                      </div>
                      <FieldGroup
                      control={this.contactUsForm}
                      render={({ get,pristine}) => (
                      <form onSubmit={e => this.handleSubmit(e)}>
                        <div class="form-group">
                          <label class="label_custom" for="user">I’m a</label>
                          {/* <input type="text" class="form-control custom_input" id="user" placeholder="" /> */}

                          <FieldControl
                            name="userType"
                            formState="guest"
                            options={{validators: Validators.required }}
                            render={({ handler, touched, hasError }) => (
                              <div>
                                <select className="form-control custom_input" id="userType" name="userType" {...handler()} >
                                  >
                                  <option value="guest">Guest</option>
                                  <option value="brand">Brand</option>
                                  <option value="property">Property</option>
                                  </select>
                                <span>
                                  {touched && hasError('required') && 'User Type is required'}
                                </span>
                              </div>
                            )}
                          />

                        </div>

                        {this.contactUsForm.value.userType==='brand'&&(

                        <div class="form-group">
                          <label class="label_custom" for="brandName">Brand Name</label>
                          {/* <input type="text" class="form-control custom_input" id="brandName" placeholder="Enter Brand Name" /> */}
                          <FieldControl
                            name="brandName"
                            options={{validators: Validators.required }}
                            render={({ handler, touched, hasError}) => (
                              <div>
                                <input className="form-control custom_input" id="brandName" placeholder="Enter Brand Name" {...handler()} />
                                <span>
                                  { hasError('required') && 'Brand Name is required'}
                                </span>
                              </div>
                            )}
                          />
                        </div>
                        )}

                        {this.contactUsForm.value.userType==='property'&&(      
                        <div class="form-group">
                          <label class="label_custom" for="detail">Property Name</label>
                          {/* <input type="text" class="form-control custom_input" placeholder="Detail goes here..." />  */}
                             <FieldControl
                            name="propertyName"
                            options={{validators: Validators.required }}
                            render={({ handler, touched, hasError,submitted}) => (
                              <div>
                                <input class="form-control custom_input" id="propertyName" placeholder="Property Name..." {...handler()} />
                                <span>
                                  {touched && hasError('required') && 'Property Name is required'}
                                </span>
                              </div>
                            )}
                          />
                        </div>
                        )}        
                      {this.contactUsForm.value.userType==='property'&&(      
                        <div class="form-group">
                          <label class="label_custom" for="detail">Property Address</label>
                          {/* <input type="text" class="form-control custom_input" placeholder="Detail goes here..." />  */}
                             <FieldControl
                            name="propertyAddress"
                            options={{validators: Validators.required }}
                            render={({ handler, touched, hasError,submitted }) => (
                              <div>
                                <input class="form-control custom_input" id="propertyAddress" placeholder="Property Addresss..." {...handler()} />
                                <span>
                                  {touched && hasError('required') && 'Property Address is required'}
                                </span>
                              </div>
                            )}
                          />
                        </div>
                        )}

                        <div class="form-group">
                          <label class="label_custom" for="contactName">Contact Name</label>
                          {/* <input type="email" class="form-control custom_input" id="contactName" placeholder="Enter contact name" /> */}
                           <FieldControl
                            name="contactName"
                            options={{ validators: Validators.required }}
                            render={({ handler, touched, hasError,submitted }) => (
                              <div>
                                <input class="form-control custom_input" id="contactName" placeholder="Enter contact Name" {...handler()} />
                                <span>
                                  {touched && hasError('required') && 'Contact Name is required'}
                                </span>
                              </div>
                            )}
                          />
                        </div>

                        <div class="form-group">
                          <label class="label_custom" for="email">Email</label>
                          {/* <input type="email" class="form-control custom_input" id="emailAddress" placeholder="Enter your email" /> */}
                              <FieldControl
                            name="email"
                            options={{ validators: [Validators.required,Validators.email] }}
                            render={({ handler, touched, hasError,submitted }) => (
                              <div>
                                <input class="form-control custom_input" id="email" placeholder="Enter your email" {...handler()} />
                                <span>
                                  {touched && hasError('required') && 'Email is required'}
                                </span>
                                <span>
                                  {touched && hasError('email') && 'Email should be valid'}
                                </span>
                              </div>
                            )}
                          />

                        </div>

                        <div class="form-group">
                          <label class="label_custom" for="contactNumber">Phone number</label>
                          {/* <input type="text" class="form-control custom_input" id="contactNumber" placeholder="Enter contact number" /> */}    
                            <FieldControl
                            name="contactNumber"
                            options={{ validators: Validators.required }}
                            render={({ handler, touched, submitted,hasError }) => (
                              <div class="form-control custom_input">
                                  <PhoneInput
                                    placeholder="Enter phone number"
                                     id="contactNumber"  {...handler()}
                                     />
                                {/* <input class="form-control custom_input" id="contactNumber" placeholder="Enter contact number" {...handler()} /> */}
                                <span>
                                  {touched && hasError('required') && 'Phone Number is required'}
                                </span>
                              </div>
                            )}
                          />

                        </div>
                        <div class="form-group">
                          <label class="label_custom" for="detail">Details</label>
                          {/* <input type="text" class="form-control custom_input" placeholder="Detail goes here..." />  */}
                             <FieldControl
                            name="detail"
                            render={({ handler, touched,submitted, hasError }) => (
                              <div>
                                <input class="form-control custom_input" id="detail" placeholder="Detail goes here..." {...handler()} />
                                <span>
                                  {touched && hasError('required') && 'Details is required'}
                                </span>
                              </div>
                            )}
                          />
                        </div>

                      <div class="footer_modal">
                        <div class="btn_container right_aligned">
                          <button class="btn btn_2" type="submit" disabled={pristine} style={{background:pristine?'gray':''}}>Send Message</button>
                        </div>
                      </div>

                      </form>
                      )}
                      />
bietkul commented 4 years ago

@saty932 Please share a code sandbox link that replicates the issue.

bietkul commented 3 years ago

Closing since no activity. Feel free to repoen.