![](/img/trans.png)
[英]For MM/DD/YYYY text, display only that text which is not entered by user
[英]password field only display only after user name entered?
我正在使用下面的 package 动态生成表单:
https://www.npmjs.com/package/react-formio
我使用此链接https://codesandbox.io/s/cra-react-formio-iy8lz生成了一个简单的login-form
构建后,它会创建一个 JSON。 然后,我使用 JSON 生成一个表单。
它创建与预期相同的表单,但我希望密码字段仅在用户输入他/她的用户名/名字/第一个字段时显示
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
);
您必须使用 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
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.