Search code examples
javascriptreactjsformio

password field only display only after user name entered?

I am using the package below to generate a form dynamically:

https://www.npmjs.com/package/react-formio

I have generated a simple login-form using this link https://codesandbox.io/s/cra-react-formio-iy8lz

After building, it creates a JSON. Then, I generate a form using that JSON.

It creates the same form as expected , but I want password field only display when user enter his/her userid/firstname/firstfield

https://codesandbox.io/s/brave-smoke-07qyi

ReactDOM.render(
  <Form
    src={{
      _id: "5b8c14217f43cc293958e2bc",
      type: "form",
      tags: [],
      owner: "553dbfc08d22d5cb1a7024f2",
      components: [
        {
          label: "First Name",
          placeholder: "Enter First Name",
          key: "firstName",
          type: "textfield",
          input: true
        },
        {
          label: "Password",
          placeholder: "Enter password",
          tableView: false,
          key: "password",
          type: "password",
          input: true,
          protected: true
        },
        {
          type: "button",
          label: "Submit",
          key: "submit",
          disableOnInvalid: true,
          input: true
        }
      ]
    }}
    onSubmit={i => {
      console.log(i);
    }}
  />,

  // <Form src="https://peb3z.sse.codesandbox.io/abc" onSubmit={(i)=>{console.log(i)}} />,
  rootElement
);

see update enter image description here

Solution

  • You have to use json conditions:

    https://codesandbox.io/s/angry-sinoussi-jswhr

    import React from "react";
import ReactDOM from "react-dom";
import { Form } from "react-formio";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Form
    src={{
      _id: "5b8c14217f43cc293958e2bc",
      type: "form",
      tags: [],
      owner: "553dbfc08d22d5cb1a7024f2",
      components: [
        {
          label: "First Name",
          placeholder: "Enter First Name",
          key: "firstName",
          type: "textfield",
          input: true
        },
        {
          label: "Last Name",
          placeholder: "Enter Last Name",
          key: "lastName",
          type: "textfield",
          input: true
        },
        {
          label: "Password",
          placeholder: "Enter password",
          tableView: false,
          key: "password",
          type: "password",
          input: true,
          protected: true,
          conditional: {
            json: {
              and: [
                {
                  "!=": [
                    {
                      var: "data.firstName"
                    },
                    ""
                  ]
                },
                {
                  "!=": [
                    {
                      var: "data.lastName"
                    },
                    ""
                  ]
                }
              ]
            }
          }
        },
        {
          type: "button",
          label: "Submit",
          key: "submit",
          disableOnInvalid: true,
          input: true
        }
      ]
    }}
    onSubmit={i => {
      console.log(i);
    }}
  />,

  // <Form src="https://peb3z.sse.codesandbox.io/abc" onSubmit={(i)=>{console.log(i)}} />,
  rootElement
);