![](/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.