rekit / antd-form-builder

https://codesandbox.io/embed/frosty-dawn-5ntyc?fontsize=14&hidenavigation=1&theme=dark

this demo is modified base on the https://rekit.github.io/antd-form-builder/#dynamic-fields. I add a remove button at the bottom, when i cehck the other, the Other input field is show, but when i check orange or apple, the input is remove, but when i submit, the form validate is got an error

I can't see the code. Please paste it here.

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

preserve: true, // by default, preserve the value

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.

Yes, this is by design. Because in wizard, we don't want to set preserve to true for every field.

Maybe we need to revisit this design. Sorry for the confusion.

Added highlighted notes in readme for the difference of default value of preserve and validateFirst, rather than changing the API.

Final update: the preserve and validateFirst default value is changed to false to be consistent with antd. Just released in 1.1.0.

form validate the field which is not exist after I remove it

form validate the field which is not exist after I remove it