Is it possible to have a nested form inside a larger form using React-Hook-Form?
I have a larger form component that I want a button to cause a MUI Dialog component to display with a mini-form inside it that will have its own validators. When data is successfully added on the dialog form it should add that data to the table.
Table details aren't important here, what I need to know is if the nested/internal form is possible. I've seen posts about two forms in a component like <form/><form/> but none about yup validation in nested forms like <form><form></form></form>.
Roughly it would look like below.
<Box component="form" onSubmit={handleSubmit(handleOnSubmit)}>
//Parent form fields here
<Table/>
//button and dialog are in a separate .jsx component
//but left here for demonstration purposes
<button onClick={openDialog}>Add</button>
<Dialog
fullScreen={fullScreen}
open={open}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
>
<Box component="form"
onSubmit={handleSubmit2(handleOnSubmit2)}>
<DialogTitle id="responsive-dialog-title">
Fill out fields
</DialogTitle>
<DialogContent>
<FormControl fullWidth size="small">
<Controller
control={control2}
name="identifier"
render={({ field, formState }) => (
<>
<TextField
{...field}
size="small"
autoFocus
id="identifier"
label="Identifier"
fullWidth
/>
<FormHelperText error>{" "}</FormHelperText>
</>
)}
/>
</FormControl>
//other fields
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose}>
Disagree
</Button>
<Button variant="contained" type="submit" autoFocus>
Save
</Button>
</DialogActions>
</Box>
</Dialog>
</Box>
I've tried using separate useForm on each but it looks like validation is still connected with each other. So the parent form gets validated and blocks submit of the child form if it fails.
Would it be better to not use React-Hook-Form for the internal form? I thought about the useFieldArray but it doesn't seem like the appropriate use in this case as I want separate validation and not be able to change the fields after submitting the inner form.
Is this even possible and if so, is it not-recommended?
Related
Hello this is my code:
<Form
layout='horizontal'
size='small'
onFinish={this.handleSubmit.bind(this)}
>
<Form.Item
label={`Organization:`}
name={`Organization`}
>
<Input
onChange={
(e) => this.handleOrgInput(e)
}
/>
</Form.Item>
<Button
icon={
this.state.showMenu ?
<CaretDownOutlined />
:
<CaretRightFilled />
}
shape="circle"
onClick={() => {
{
this.handleFetchSystemData()
}
disabled={this.state.showMenu}
style={{marginLeft: 5}}
/>
{this.state.showMenu && this.state.myName!==undefined ?
<div>
{console.log('Name :', this.state.myName}
<Form.Item
name={"Name"}
label={`Name:`}
initialValue={this.state.myName}
>
<Input
// defaultValue={this.state.myName}
/>
</Form.Item>
<Form.Item
name={"lastName"}
label={`LastName:`}
initialValue={this.state.myLastName}
>
<Input
// defaultValue={this.state.myLastName}
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
size="middle"
>
Submit
</Button>
</Form.Item>
</div>
:
undefined
</Form>
When i am pressing the button i call my server to fetch the data. But when i change the input and then clicking again the button the values on the Form.Item are remain the same, but my state has change. I can see that my state changes because i console.log it.
When i comment the initialValue attribute on Form.Item and using defaultValue attribute on Input component my values are changing smoothly, but when i press sumbit the values are not senting from the Form. This is a problem for me
I have seen a lot about this situation, but most of it regards functional components and not class components. Also i have seen that with class components some people using refs but Form component has not attribute ref. I have seen this regarding class components but did not help me. In the end the antd documentation regards i think functional components and not class, so i am a comfused.
I'm trying to create a form inside modal using react class component and antd, but i couldn't find a way to get the data submited in the form. i tried to console the event of the onOk in antd modal but i same no data.
i also found an example but it was with function component and hooks Form.useForm()
here is the simple if anyone can help : Simple
any hint will be helpful thanks.
The solution is to hide the footer of the modal and add submit for the form exemple :
<Modal
title={this.props.formTitle}
visible={this.state.modalVisible}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}
footer={[]}//this to hide the default inputs of the modal
>
<Form
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: 'public',
}}
onFinish={this.handleOk}>
<Form.Item
name="title"
label="Title"
rules={[
{
required: true,
message: 'Please input the title of collection!',
},
]}>
<Input />
</Form.Item>
<Form.Item name="description" label="Description">
<Input type="textarea" />
</Form.Item>
<Form.Item name="modifier" className="collection-create-form_last-form-item">
<Radio.Group>
<Radio value="public">Public</Radio>
<Radio value="private">Private</Radio>
</Radio.Group>
//this is the submit of the form
<Button key="submit" type="primary" loading={this.state.confirmLoading} htmlType="submit">
submit
</Button>
</Form.Item>
</Form>
</Modal>
I tried this out myself with limited TS(JS) knowledge using Antd & React framework.
The steps are as follow.
construct an object e.g:
let obj1 = {
variableA : "",
variableB : ""
}
In your form body get the value using
<Form.Item ... onChange={(event)=>obj1.variableA=event.target.value}/>
In this case, the event keyword will return the final input value to instances (e.g variableA) within obj1 with given input from different form, which you can operate on after the form submission finish in a quasi-java style.
You can test it by creating alert(obj1.variableA) or console.log function to see if that's the desired value, in my case it works well with string and numeric input.
As I am not doing front end, so I might make mistakes and do feel free to point it out.
I look on another questions, but cant really solve my problem. Im trying to call a function to open a modal with reactJS, but the call button is in one page and the modal files are in another to be reused if necessary, but when i click in it, its return a not a fuction error; Here is my code.
This is the button. The openModal is not working
<TableCell>
<DbButton
onClick={(e) => openModal(event.id)}
>{<FormattedMessage id='delete' />}</DbButton>
</TableCell>
This is the modal in another file
const openModal = (eventId) => {
setOpen(true)
setEventId(eventId)
}
return (
<Panel border={false}>
<TableEventsComponent
data={dataList}
goTo={goTo}
onChangePage={onChangePage}
onChangeRowsPerPage={onChangeRowsPerPage}
rowsPerPage={rowsPerPage}
page={page}
deleting={deleting}
></TableEventsComponent>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{<FormattedMessage id='alert-title' />}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{<FormattedMessage id='alert-body' />}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
onClick={handleClose}
color="primary">
{<FormattedMessage id='cancel' />}
</Button>
<Button
onClick={handleConfirm}
color="primary"
autoFocus>
{<FormattedMessage id='confirm' />}
</Button>
</DialogActions>
</Dialog>
</Panel>
)
Any advice?
Basically, this project is abstracting most of the components, to be reusable and easier to do maintenance. The father index where the modal construction and the logic handles things had a events listener to receive the props passed by, and the son index where the page shows to the user and had the delete button just passa the props to call the function to do the job.
So, on the TableEventsComponent that i put on my second block of code on the question, i put a
openModal={openModal}
And, on the page i got the button, i had
const TableEventsComponent = ({
openModal,
...
})
Thats it, i just not communicating the way it should be.
I have created a simple form with https://material-ui.com/
Mt form has two fields:
I have implemented a form Dialog popup when user clicks in the "Booking name" field.
The problem is that my Dialog is partly covered by a keyboard. I want Dialog move up when keyboard is shown.
Any ideas how to fix it:
Here is my Dialoge code:
<Dialog open={this.state.booking_name_dialog_open} aria-labelledby="form-dialog-title" maxWidth={"lg"} fullWidth={true}>
<DialogTitle id="form-dialog-title">Booking name:</DialogTitle>
<DialogContent>
<TextField autoFocus margin="dense" id="name" label="Booking name" type="text" fullWidth/>
</DialogContent>
<DialogActions>
<Button color="primary">Cancel</Button>
<Button color="primary">Submit</Button>
</DialogActions>
</Dialog>
Any help is welcome!
You can wrap your form inside core component from react-native
import {keyboardAvoidingView} from 'react-native';
<KeyboardAvoidingView>
<form>
</form>
</KeyboardAvoidingView>
Hope it helps.
So, the problem was because of StatusBar plugin. Just don't use it and you won't have such a problem.
You can try using 'cordova-plugin-ionic-keyboard' plugin https://github.com/ionic-team/cordova-plugin-ionic-keyboard and check whether it solves.
I have recently started exploring Material UI and I have run into this strange behavior of a hintText in a TextField Component(the one from Material UI)
This is my code:
/* in my component ... */
/* ... */
render() {
const actions = [
<FlatButton
key="1"
label="Cancel"
primary
onTouchTap={this.handleClose}
/>,
<FlatButton
key="2"
label="Submit"
primary
type="submit"
onTouchTap={this.handleSubmit}
/>
];
return (
<div>
<IconButton
tooltip="Add Asset"
onTouchTap={this.handleOpen}>
<Add color={"#000"} />
</IconButton>
<Dialog
title="Add"
actions={actions}
modal
open={this.state.open}>
<form>
<TextField hintText="Type"
value={this.state.name}
onChange={this.handleName}/>
</form>
</Dialog>
</div>
);
}
So when I start typing in the textfield, the hinttext remains, resulting in unreadable text due to letters over another letters.
I would really appreciate it if someone could help me. :)
image
Try using placholder="Type" rather than hintText="Type".
The solution for this is that you will have to update the variable name in the function handleName everytime the user updates the field. So the complete code is:
<TextField
hintText="Type"
value={this.state.name}
onChange={this.handleName}
/>
and the function handleName:
handleName=(event)=>{
this.setState({name:event.target.value});
}
It should work. If not, let me know in the comments below!