показать минимальную и максимальную длину формы ошибки проверки в реакции?

Question

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

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

Я создал простую форму для входа по этой ссылке https://codesandbox.io/s/cra-react-formio-iy8lz

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

https://codesandbox.io/s/quirky-chatelet-5ujhj

Я хочу показать пользовательские сообщения, такие как required field и min length error message и max length error message

ReactDOM.render(
  <Form
    src={{
      display: "form",
      components: [
        {
          label: "Name",
          validate: {
            required: true,
            json: {
              if: [
                {
                  "===": [
                    {
                      var: "data.name"
                    },
                    ""
                  ]
                },
                true,
                "required!"
              ]
            },
            minLength: 5,
            maxLength: 15
          },
          key: "name",
          type: "textfield",
          input: true
        },
        {
          type: "button",
          label: "Submit",
          key: "submit",
          //  disableOnInvalid: true,
          input: true
        }
      ]
    }}
    options={{ noAlerts: true }}
    onSubmit={i => {
      alert(JSON.stringify(i.data));
    }}
  />,

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

Answer 1

Я думаю, что вместо использования логики JSON вы можете написать собственный метод проверки в react-formio. Где в зависимости от условия вы можете добавить свою логику. Код:

import React from "react";
import ReactDOM from "react-dom";
import { FormBuilder } from "react-formio";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <FormBuilder
        form={{
          components: [
            {
              input: true,
              tableView: true,
              inputType: "text",
              inputMask: "",
              label: "First Name",
              key: "firstName",
              placeholder: "Enter your first name",
              prefix: "",
              suffix: "",
              multiple: false,
              defaultValue: "",
              protected: false,
              unique: false,
              persistent: true,
              validate: {
                required: false,
                minLength: "",
                maxLength: "",
                pattern: "",
                custom: "valid =  (input.length< 5)  ? 'Your input must be greater than 5':(input.length> 20) ? \n\"Your input must be less than 20\" \n : true;", //Your custom logic code
                customPrivate: false
              },
              conditional: {
                show: false,
                when: null,
                eq: ""
              },
              type: "textfield"
            },
            {
              input: true,
              tableView: true,
              label: "Message",
              key: "message",
              placeholder: "What do you think?",
              prefix: "",
              suffix: "",
              rows: 3,
              multiple: false,
              defaultValue: "",
              protected: false,
              persistent: true,
              validate: {
                required: false,
                minLength: "",
                maxLength: "",
                pattern: "",
                custom: ""
              },
              type: "textarea",
              conditional: {
                show: false,
                when: null,
                eq: ""
              }
            },
            {
              type: "button",
              theme: "primary",
              disableOnInvalid: true,
              action: "submit",
              block: false,
              rightIcon: "",
              leftIcon: "",
              size: "md",
              key: "submit",
              tableView: false,
              label: "Submit",
              input: true
            }
          ],
          display: "form"
        }}
        onChange={schema => console.log(schema)}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вот демоверсия: https://codesandbox.io/s/cra-react-formio-niq10

Я бы предпочел вместо того, чтобы создавать свою собственную форму создания с этого сервера, и она должна быть легко подключаемой и играть. При добавлении JSON есть вероятность ошибки.

Answer 2

Пара предложений.

Вы должны использовать атрибут form вместо атрибута src. В то время как опубликованный код имеет правильный синтаксис, код и окно кодов по-прежнему использует.

<FormBuilder
        src={{}} />

Как уже упоминалось @ShubhamVerma, вы должны использовать пользовательскую проверку JavaScript.

Кроме того, так как это второй вопрос, который выспрашиваете о formio, я не уверен, как вы создаете JSON.

Вы должны перейти на вкладку проверки компонента и увидеть различные доступные опции, с которыми вы можете поиграть. В вашем случае вы можете ввести скрипт валидации в пользовательский раздел валидации. В этом разделе также описаны все переменные, доступные для доступа.

if (input.length === 0){
  valid = "You should enter something";
}
else{
  if(input.length < 3){
    valid = `Min length is 3`;
  }else if (input.length > 15){
    valid  = `Max length is 15`
  }else{
    valid = true
  }
} 

Также обратите внимание, что вам может потребоваться переопределить CSS, чтобы отобразить заполнитель ошибок формы. Похоже, загрузчик устанавливает его для отображения: нет.

styles.css

.formio-errors.invalid-feedback {
  display: block;
} 

Демо

Если вкладки настройки формы не открываются в браузере codeandbox, попробуйте открыть в новом окне.

.................. .................................................. .................................................. ........ ?

https://iy8lz.csb.app/