поле пароля отображается только после ввода имени пользователя? - PullRequest
Новая
       10

поле пароля отображается только после ввода имени пользователя?

0 голосов
/ 03 ноября 2019

Я использую пакет ниже для динамического создания формы:

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

Я сгенерировал простое login-form, используя эту ссылку https://codesandbox.io/s/cra-react-formio-iy8lz

После сборки создается JSON. Затем я генерирую форму, используя этот JSON.

Он создает ту же форму, что и ожидалось, но Я хочу, чтобы поле пароля отображалось только при вводе пользователем его / ее ИД пользователя / имя_первой /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
);

см. обновление enter image description here

1 Ответ

1 голос
/ 03 ноября 2019

Вы должны использовать 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
);
...