密码字段仅在输入用户名后才显示？

Question

我正在使用下面的包动态生成表单：

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

我使用这个 link 生成了一个简单的 login-form https://codesandbox.io/s/cra-react-formio-iy8lz

构建后，它会创建一个 JSON。然后，我使用 JSON.

生成一个表单

它创建了与预期相同的表单，但是我希望密码字段仅在用户输入时显示 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
);

查看更新

Answer 1

你必须使用json条件：

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
);

密码字段仅在输入用户名后才显示？

password field only display only after user name entered?

javascript

reactjs

formio