Comments (6)
I can't see the code. Please paste it here.
from antd-form-builder.
I can't see the code. Please paste it here.
I have update the link.
or if the username is not required, when i remove it, the form values console result container the username value
import React, { useState } from "react";
import { Form, Button } from "antd";
import FormBuilder from "antd-form-builder";
export default Form.create()(({ form }) => {
const handleSubmit = e => {
e.preventDefault();
form.validateFields((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
}
});
};
const [fields, setFields] = useState([
{
key: "username",
label: "User Name",
rules: [
{
required: true
}
]
},
{ key: "password", label: "Password", widget: "password" }
]);
return (
<Form onSubmit={handleSubmit}>
<FormBuilder
meta={{
fields
}}
form={form}
/>
<Form.Item wrapperCol={{ span: 16, offset: 8 }}>
<Button type="primary" htmlType="submit">
Log in
</Button>
</Form.Item>
<Button
onClick={() => {
setFields([
{ key: "password", label: "Password", widget: "password" }
]);
}}
>
remove
</Button>
</Form>
);
});
import React, { useCallback } from "react";
import { Form, Button } from "antd";
import FormBuilder from "antd-form-builder";
export default Form.create()(({ form }) => {
const handleSubmit = useCallback(
evt => {
evt.preventDefault();
form.validateFields((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
}
});
},
[form]
);
const meta = [
{
key: "favoriteFruit",
label: "Favorite Fruit",
widget: "radio-group",
options: ["Apple", "Orange", "Other"],
initialValue: "Apple"
}
];
// Push other input if choose others
if (form.getFieldValue("favoriteFruit") === "Other") {
meta.push({
key: "otherFruit",
label: "Other",
rules: [
{
required: true
}
]
});
}
return (
<Form onSubmit={handleSubmit}>
<FormBuilder meta={meta} form={form} />
<Form.Item wrapperCol={{ span: 16, offset: 8 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
});
in the Dynamic Fields, you can see the console. even if the otherFruit field is removed, you can also see it's value when submit
antd-form-builder/src/FormBuilder.js
Line 205 in d82fb95
I think I got the answer, because the preserve: true, in the antd preserve default value is not true. but in antd-form-builder it default true. so I think it has to be the same as antd.
from antd-form-builder.
Yes, this is by design. Because in wizard, we don't want to set preserve to true for every field.
from antd-form-builder.
Maybe we need to revisit this design. Sorry for the confusion.
from antd-form-builder.
Added highlighted notes in readme for the difference of default value of preserve
and validateFirst
, rather than changing the API.
from antd-form-builder.
Final update: the preserve
and validateFirst
default value is changed to false
to be consistent with antd. Just released in 1.1.0
.
from antd-form-builder.
Related Issues (20)
- Could we create Form List with antd-form-builder? HOT 1
- TS Error : Property 'useForm' does not exist on type 'FC<FormBuilderInterface> HOT 3
- This project is Awesome!And question is: Any way design form with UI?
- Uncaught TypeError: form.getFieldsValue is not a function HOT 2
- Animating Dynamic Fields HOT 1
- How to change tooltip icon HOT 1
- Is there a way i can provide properties in teaxtArea like only 200 character are allowed HOT 1
- Widget 'autocomplete' not found, did you defined it by FormBuilder.defineComponent? HOT 2
- N/A data HOT 3
- antd 5 compatability HOT 1
- is there a way to define the condition to enable / disable fields inside the meta HOT 1
- Typescript Support HOT 1
- can support upload? HOT 1
- 希望大佬添加一下 form list HOT 2
- Is this possible to render such layout ?
- Adding new components like antd 4 Upload HOT 1
- React 17 support
- Getting a error when defining FormBuilder.defineWidget in my component when a custom component is being rendered...The error is "Widget is already defined" HOT 3
- Nest for values as array
- useForceUpdate does not exists on type HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from antd-form-builder.