tntd 2.6.9 → 2.6.10

package/es/tntd-form/tntd-form.stories.js

@@ -0,0 +1,786 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import React, { useEffect, useRef, useState } from 'react';
+import Form from './index';
+import { Input, InputNumber, Checkbox, Button, Select, Radio, Row, message, Icon, Modal, Drawer, Cascader, DatePicker, TimePicker, TreeSelect, Switch, Upload } from '../index';
+import moment from 'moment';
+const {
+  Option
+} = Select;
+const options = [{
+  label: 'Apple',
+  value: 'apple'
+}, {
+  label: 'Pear',
+  value: 'pear'
+}];
+export default {
+  title: 'TntdForm',
+  component: Form
+};
+//👇 We create a “template” of how args map to rendering
+const Template = args => {
+  return React.createElement(Form, Object.assign({}, args));
+};
+export const Basic = Template.bind({});
+Basic.args = {
+  //👇 The args you need here will depend on your component
+  initialValues: {
+    username: 'zhang san',
+    remember: true
+  },
+  name: 'Basic',
+  disabled: false,
+  labelCol: {
+    span: 4
+  },
+  wrapperCol: {
+    span: 20
+  },
+  onFinish: values => {
+    console.log('Success:', values);
+  },
+  onFinishFailed(errorInfo) {
+    console.log('Failed:', errorInfo);
+  },
+  autoComplete: 'off',
+  children: React.createElement(React.Fragment, null, React.createElement(Form.Item, {
+    label: "Username",
+    name: "username",
+    rules: [{
+      required: true,
+      message: 'Please input your username!'
+    }]
+  }, React.createElement(Input, null)), React.createElement(Form.Item, {
+    label: "Password",
+    name: "password",
+    rules: [{
+      required: true,
+      message: 'Please input your password!'
+    }]
+  }, React.createElement(Input.Password, null)), React.createElement(Form.Item, {
+    name: "remember",
+    valuePropName: "checked",
+    wrapperCol: {
+      offset: 8,
+      span: 16
+    }
+  }, React.createElement(Checkbox, null, "Remember me")), React.createElement(Form.Item, {
+    wrapperCol: {
+      offset: 8,
+      span: 16
+    }
+  }, React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, "Submit")))
+};
+const FormMethodsTemplate = args => {
+  const [form] = Form.useForm();
+  const layout = {
+    labelCol: {
+      span: 8
+    },
+    wrapperCol: {
+      span: 16
+    }
+  };
+  const tailLayout = {
+    wrapperCol: {
+      offset: 8,
+      span: 16
+    }
+  };
+  const onGenderChange = value => {
+    switch (value) {
+      case 'male':
+        form.setFieldsValue({
+          note: 'Hi, man!'
+        });
+        return;
+      case 'female':
+        form.setFieldsValue({
+          note: 'Hi, lady!'
+        });
+        return;
+      case 'other':
+        form.setFieldsValue({
+          note: 'Hi there!'
+        });
+    }
+  };
+  const onFinish = values => {
+    console.log(values);
+  };
+  const onReset = () => {
+    form.resetFields();
+  };
+  const onFill = () => {
+    form.setFieldsValue({
+      note: 'Hello world!',
+      gender: 'male'
+    });
+  };
+  return React.createElement(Form, Object.assign({}, layout, {
+    form: form,
+    name: "control-hooks",
+    onFinish: onFinish
+  }, args), React.createElement(Form.Item, {
+    name: "note",
+    label: "Note",
+    rules: [{
+      required: true
+    }]
+  }, React.createElement(Input, null)), React.createElement(Form.Item, {
+    name: "gender",
+    label: "Gender",
+    rules: [{
+      required: true
+    }]
+  }, React.createElement(Select, {
+    placeholder: "Select a option and change input text above",
+    onChange: onGenderChange,
+    allowClear: true
+  }, React.createElement(Option, {
+    value: "male"
+  }, "male"), React.createElement(Option, {
+    value: "female"
+  }, "female"), React.createElement(Option, {
+    value: "other"
+  }, "other"))), React.createElement(Form.Item, {
+    noStyle: true,
+    shouldUpdate: (prevValues, currentValues) => prevValues.gender !== currentValues.gender
+  }, ({
+    getFieldValue
+  }) => getFieldValue('gender') === 'other' ? React.createElement(Form.Item, {
+    name: "customizeGender",
+    label: "Customize Gender",
+    rules: [{
+      required: true
+    }]
+  }, React.createElement(Input, null)) : null), React.createElement(Form.Item, Object.assign({}, tailLayout), React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit",
+    style: {
+      marginRight: 12
+    }
+  }, "Submit"), React.createElement(Button, {
+    htmlType: "button",
+    onClick: onReset
+  }, "Reset"), React.createElement(Button, {
+    type: "link",
+    htmlType: "button",
+    onClick: onFill
+  }, "Fill form")));
+};
+// 表单方法调用
+export const FormMethodInvoke = FormMethodsTemplate.bind({});
+FormMethodInvoke.args = {};
+const FormLayoutTemplate = () => {
+  const [form] = Form.useForm();
+  const [formLayout, setFormLayout] = useState('horizontal');
+  const onFormLayoutChange = ({
+    layout
+  }) => {
+    setFormLayout(layout);
+  };
+  const formItemLayout = formLayout === 'horizontal' ? {
+    labelCol: {
+      span: 4
+    },
+    wrapperCol: {
+      span: 14
+    }
+  } : null;
+  const buttonItemLayout = formLayout === 'horizontal' ? {
+    wrapperCol: {
+      span: 14,
+      offset: 4
+    }
+  } : null;
+  return React.createElement(Form, Object.assign({}, formItemLayout, {
+    layout: formLayout,
+    form: form,
+    initialValues: {
+      layout: formLayout
+    },
+    onValuesChange: onFormLayoutChange
+  }), React.createElement(Form.Item, {
+    label: "Form Layout",
+    name: "layout"
+  }, React.createElement(Radio.Group, {
+    value: formLayout
+  }, React.createElement(Radio.Button, {
+    value: "horizontal"
+  }, "Horizontal"), React.createElement(Radio.Button, {
+    value: "vertical"
+  }, "Vertical"), React.createElement(Radio.Button, {
+    value: "inline"
+  }, "Inline"))), React.createElement(Form.Item, {
+    label: "Field A"
+  }, React.createElement(Input, {
+    placeholder: "input placeholder"
+  })), React.createElement(Form.Item, {
+    label: "Field B"
+  }, React.createElement(Input, {
+    placeholder: "input placeholder"
+  })), React.createElement(Form.Item, Object.assign({}, buttonItemLayout), React.createElement(Button, {
+    type: "primary"
+  }, "Submit")));
+};
+export const FormLayoutDemo = FormLayoutTemplate.bind({});
+// 非阻塞校验
+const UnblockValidateTemplate = () => {
+  const [form] = Form.useForm();
+  const onFinish = () => {
+    void message.success('Submit success!');
+  };
+  const onFinishFailed = () => {
+    void message.error('Submit failed!');
+  };
+  const onFill = () => {
+    form.setFieldsValue({
+      url: 'https://taobao.com/'
+    });
+  };
+  return React.createElement(Form, {
+    form: form,
+    onFinish: onFinish,
+    onFinishFailed: onFinishFailed,
+    autoComplete: "off"
+  }, React.createElement(Form.Item, {
+    name: "url",
+    label: "URL",
+    rules: [{
+      required: true
+    }, {
+      type: 'url',
+      warningOnly: true
+    }, {
+      type: 'string',
+      min: 6
+    }]
+  }, React.createElement(Input, {
+    placeholder: "input placeholder"
+  })), React.createElement(Form.Item, null, React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit",
+    style: {
+      marginRight: 12
+    }
+  }, "Submit"), React.createElement(Button, {
+    htmlType: "button",
+    onClick: onFill
+  }, "Fill")));
+};
+export const UnblockValidate = UnblockValidateTemplate.bind({});
+// 字段监听hooks
+const UseWatchTemplate = () => {
+  const [form] = Form.useForm();
+  const nameValue = Form.useWatch('name', form);
+  return React.createElement(React.Fragment, null, React.createElement(Form, {
+    form: form,
+    layout: "vertical",
+    autoComplete: "off"
+  }, React.createElement(Form.Item, {
+    name: "name",
+    label: "Name (Watch to trigger rerender)"
+  }, React.createElement(Input, null)), React.createElement(Form.Item, {
+    name: "age",
+    label: "Age (Not Watch)"
+  }, React.createElement(InputNumber, null))), React.createElement("pre", null, "Name Value: ", nameValue));
+};
+export const UseWatchHooks = UseWatchTemplate.bind({});
+// 动态增减标单项
+const formItemLayout = {
+  labelCol: {
+    xs: {
+      span: 24
+    },
+    sm: {
+      span: 4
+    }
+  },
+  wrapperCol: {
+    xs: {
+      span: 24
+    },
+    sm: {
+      span: 20
+    }
+  }
+};
+const formItemLayoutWithOutLabel = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0
+    },
+    sm: {
+      span: 20,
+      offset: 4
+    }
+  }
+};
+const DynamicAddRemoveFieldsTpl = () => {
+  const onFinish = values => {
+    console.log('Received values of form:', values);
+  };
+  return React.createElement(Form, Object.assign({
+    name: "dynamic_form_item"
+  }, formItemLayoutWithOutLabel, {
+    onFinish: onFinish
+  }), React.createElement(Form.List, {
+    name: "names",
+    rules: [{
+      validator: async (_, names) => {
+        if (!names || names.length < 2) {
+          return Promise.reject(new Error('At least 2 passengers'));
+        }
+      }
+    }]
+  }, (fields, {
+    add,
+    remove
+  }, {
+    errors
+  }) => React.createElement(React.Fragment, null, fields.map((field, index) => React.createElement(Form.Item, Object.assign({}, index === 0 ? formItemLayout : formItemLayoutWithOutLabel, {
+    label: index === 0 ? 'Passengers' : '',
+    required: false,
+    key: field.key
+  }), React.createElement(Form.Item, Object.assign({}, field, {
+    validateTrigger: ['onChange', 'onBlur'],
+    rules: [{
+      required: true,
+      whitespace: true,
+      message: "Please input passenger's name or delete this field."
+    }],
+    noStyle: true
+  }), React.createElement(Input, {
+    placeholder: "passenger name",
+    style: {
+      width: '60%'
+    }
+  })), fields.length > 1 ? React.createElement(Icon, {
+    type: "minus-circle",
+    className: "dynamic-delete-button",
+    onClick: () => remove(field.name)
+  }) : null)), React.createElement(Form.Item, null, React.createElement(Button, {
+    type: "dashed",
+    onClick: () => add(),
+    style: {
+      width: '60%'
+    },
+    icon: "plus-circle"
+  }, "Add field"), React.createElement(Button, {
+    type: "dashed",
+    onClick: () => {
+      add('The head item', 0);
+    },
+    style: {
+      width: '60%',
+      marginTop: '20px'
+    },
+    icon: "plus-circle"
+  }, "Add field at head"), React.createElement(Form.ErrorList, {
+    errors: errors
+  })))), React.createElement(Form.Item, null, React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, "Submit")));
+};
+export const DynamicAddRemoveFields = DynamicAddRemoveFieldsTpl.bind({});
+const areas = [{
+  label: 'Beijing',
+  value: 'Beijing'
+}, {
+  label: 'Shanghai',
+  value: 'Shanghai'
+}];
+const sights = {
+  Beijing: ['Tiananmen', 'Great Wall'],
+  Shanghai: ['Oriental Pearl', 'The Bund']
+};
+const DynamicItemsComplexTpl = () => {
+  const [form] = Form.useForm();
+  const onFinish = values => {
+    console.log('Received values of form:', values);
+  };
+  const handleChange = () => {
+    form.setFieldsValue({
+      sights: []
+    });
+  };
+  return React.createElement(Form, {
+    form: form,
+    name: "dynamic_form_complex",
+    onFinish: onFinish,
+    autoComplete: "off"
+  }, React.createElement(Form.Item, {
+    name: "area",
+    label: "Area",
+    rules: [{
+      required: true,
+      message: 'Missing area'
+    }]
+  }, React.createElement(Select, {
+    onChange: handleChange
+  }, areas.map(({
+    label,
+    value
+  }) => React.createElement(Select.Option, {
+    key: value,
+    value: value
+  }, label)))), React.createElement(Form.List, {
+    name: "sights"
+  }, (fields, {
+    add,
+    remove
+  }) => React.createElement(React.Fragment, null, fields.map(field => React.createElement(Row, {
+    key: field.key,
+    style: {
+      display: 'flex'
+    }
+  }, React.createElement(Form.Item, {
+    noStyle: true,
+    shouldUpdate: (prevValues, curValues) => prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
+  }, () => React.createElement(Form.Item, Object.assign({}, field, {
+    label: "Sight",
+    name: [field.name, 'sight'],
+    rules: [{
+      required: true,
+      message: 'Missing sight'
+    }]
+  }), React.createElement(Select, {
+    disabled: !form.getFieldValue('area'),
+    style: {
+      width: 130
+    }
+  }, (sights[form.getFieldValue('area')] || []).map(item => React.createElement(Option, {
+    key: item,
+    value: item
+  }, item))))), React.createElement(Form.Item, Object.assign({}, field, {
+    label: "Price",
+    name: [field.name, 'price'],
+    rules: [{
+      required: true,
+      message: 'Missing price'
+    }]
+  }), React.createElement(Input, null)), React.createElement(Icon, {
+    type: "minus-circle",
+    onClick: () => remove(field.name)
+  }))), React.createElement(Form.Item, null, React.createElement(Button, {
+    type: "dashed",
+    onClick: () => add(),
+    block: true,
+    icon: "plus-circle"
+  }, "Add sights")))), React.createElement(Form.Item, null, React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, "Submit")));
+};
+export const DynamicItemsComplex = DynamicItemsComplexTpl.bind({});
+// 弹窗中表单
+const FormInModalTpl = () => {
+  const [data, setData] = useState({});
+  const [popupType, setPopupType] = useState('modal');
+  const PopupCom = {
+    modal: Modal,
+    drawer: Drawer
+  }[popupType];
+  const close = () => setData(null);
+  return React.createElement(React.Fragment, null, React.createElement(Button, {
+    type: "primary",
+    onClick: () => setData({}),
+    style: {
+      marginRight: 12
+    }
+  }, "\u65B0\u5EFA"), React.createElement(Button, {
+    type: "primary",
+    style: {
+      marginRight: 12,
+      marginBottom: 12
+    },
+    onClick: () => setData({
+      id: 1,
+      name: 'Hello',
+      desc: 'Hello World'
+    })
+  }, "\u7F16\u8F91"), React.createElement("br", null), React.createElement(Radio.Group, {
+    value: popupType,
+    onChange: evt => setPopupType(evt.target.value)
+  }, React.createElement(Radio.Button, {
+    value: "modal"
+  }, "\u5F39\u7A97"), React.createElement(Radio.Button, {
+    value: "drawer"
+  }, "\u62BD\u5C49")), React.createElement(PopupCom, {
+    title: `${(data === null || data === void 0 ? void 0 : data.id) ? '编辑' : '新建'}`,
+    visible: !!data,
+    width: "40%",
+    destroyOnClose: true,
+    onClose: close,
+    onCancel: close,
+    onOk: close
+  }, React.createElement(Form, {
+    initialValues: data
+  }, React.createElement(Form.Item, {
+    name: "name",
+    label: "\u540D\u79F0"
+  }, React.createElement(Input, null)), React.createElement(Form.Item, {
+    name: "desc",
+    label: "\u63CF\u8FF0"
+  }, React.createElement(Input.TextArea, null)))));
+};
+export const FormInModal = FormInModalTpl.bind({});
+// 表单禁用/只读
+const {
+  RangePicker,
+  MonthPicker,
+  WeekPicker
+} = DatePicker;
+const {
+  TextArea
+} = Input;
+const FormDisabledTpl = () => {
+  const [componentDisabled, setComponentDisabled] = useState(true);
+  const [componentReadonly, setComponentReadonly] = useState(false);
+  const inputRef = useRef(null);
+  const onFormLayoutChange = _a => {
+    var {
+        disabled
+      } = _a,
+      values = __rest(_a, ["disabled"]);
+    console.log(values);
+    setComponentDisabled(disabled);
+  };
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [componentDisabled, componentReadonly]);
+  return React.createElement(React.Fragment, null, React.createElement(Checkbox, {
+    checked: componentDisabled,
+    onChange: e => setComponentDisabled(e.target.checked)
+  }, "Form disabled"), React.createElement(Checkbox, {
+    checked: componentReadonly,
+    onChange: e => setComponentReadonly(e.target.checked)
+  }, "Form readonly"), React.createElement(Form, {
+    labelCol: {
+      span: 4
+    },
+    wrapperCol: {
+      span: 14
+    },
+    layout: "horizontal",
+    onValuesChange: onFormLayoutChange,
+    disabled: componentDisabled,
+    readonly: componentReadonly,
+    initialValues: {
+      disabled: true,
+      switch: true,
+      input: 'Hello World',
+      select: 'demo',
+      select2: 'demo',
+      checkboxGroup: ['apple', 'pear'],
+      radioGroup: 'apple',
+      radioGroup2: 'apple',
+      treeSelect: 'bamboo',
+      cascader: ['zhejiang', 'hangzhou'],
+      datePicker: moment(new Date()),
+      datePicker2: moment(new Date()),
+      rangePicker: [moment(new Date()).subtract(7, 'days'), moment(new Date())],
+      monthPicker: moment(),
+      weekPicker: moment(),
+      timePicker: moment('13:30:56', 'HH:mm:ss'),
+      inputNumber: 88,
+      textArea: 'Hello Input.TextArea:)'
+    }
+  }, React.createElement(Form.Item, {
+    label: "Chekbox",
+    name: "disabled",
+    valuePropName: "checked"
+  }, React.createElement(Checkbox, null, "Checkbox")), React.createElement(Form.Item, {
+    label: "Radio",
+    name: "radioGroup"
+  }, React.createElement(Radio.Group, null, React.createElement(Radio, {
+    value: "apple"
+  }, " Apple "), React.createElement(Radio, {
+    value: "pear"
+  }, " Pear "))), React.createElement(Form.Item, {
+    label: "Radio",
+    name: "radioGroup2"
+  }, React.createElement(Radio.Group, {
+    options: options
+  }, React.createElement(Radio, {
+    value: "apple"
+  }, " Apple "), React.createElement(Radio, {
+    value: "pear"
+  }, " Pear "))), React.createElement(Form.Item, {
+    label: "Input",
+    name: "input"
+  }, React.createElement(Input, {
+    ref: inputRef
+  })), React.createElement(Form.Item, {
+    label: "ChekboxGroup",
+    name: "checkboxGroup"
+  }, React.createElement(Checkbox.Group, {
+    options: options
+  })), React.createElement(Form.Item, {
+    label: "Select",
+    name: "select"
+  }, React.createElement(Select, null, React.createElement(Select.Option, {
+    value: "demo"
+  }, "Demo"))), React.createElement(Form.Item, {
+    label: "Select",
+    name: "select2"
+  }, React.createElement(Select, {
+    options: [{
+      label: 'Demo',
+      value: 'demo'
+    }]
+  }, React.createElement(Select.Option, {
+    value: "demo"
+  }, "Demo"))), React.createElement(Form.Item, {
+    label: "TreeSelect",
+    name: "treeSelect"
+  }, React.createElement(TreeSelect, {
+    treeData: [{
+      title: 'Light',
+      value: 'light',
+      children: [{
+        title: 'Bamboo',
+        value: 'bamboo'
+      }]
+    }],
+    treeDefaultExpandAll: true
+  })), React.createElement(Form.Item, {
+    label: "Cascader",
+    name: "cascader"
+  }, React.createElement(Cascader, {
+    options: [{
+      value: 'zhejiang',
+      label: 'Zhejiang',
+      children: [{
+        value: 'hangzhou',
+        label: 'Hangzhou'
+      }]
+    }]
+  })), React.createElement(Form.Item, {
+    label: "DatePicker",
+    name: "datePicker"
+  }, React.createElement(DatePicker, null)), React.createElement(Form.Item, {
+    label: "DatePicker2",
+    name: "datePicker2"
+  }, React.createElement(DatePicker, {
+    showTime: true
+  })), React.createElement(Form.Item, {
+    label: "RangePicker",
+    name: "rangePicker"
+  }, React.createElement(RangePicker, null)), React.createElement(Form.Item, {
+    label: "MonthPicker",
+    name: "monthPicker"
+  }, React.createElement(MonthPicker, null)), React.createElement(Form.Item, {
+    label: "WeekPicker",
+    name: "weekPicker"
+  }, React.createElement(WeekPicker, null)), React.createElement(Form.Item, {
+    label: "TimePicker",
+    name: "timePicker"
+  }, React.createElement(TimePicker, null)), React.createElement(Form.Item, {
+    label: "InputNumber",
+    name: "inputNumber"
+  }, React.createElement(InputNumber, null)), React.createElement(Form.Item, {
+    label: "TextArea",
+    name: "textArea"
+  }, React.createElement(TextArea, {
+    rows: 4
+  })), React.createElement(Form.Item, {
+    label: "Switch",
+    name: "switch",
+    valuePropName: "checked"
+  }, React.createElement(Switch, null)), React.createElement(Form.Item, {
+    label: "Upload",
+    name: "upload"
+  }, React.createElement(Upload, {
+    listType: "picture-card",
+    beforeUpload: () => false
+  }, React.createElement("div", null, React.createElement(Icon, {
+    type: "plus"
+  }), React.createElement("div", {
+    style: {
+      marginTop: 8
+    }
+  }, "Upload")))), React.createElement(Form.Item, {
+    label: "Button"
+  }, React.createElement(Button, null, "Button"))));
+};
+export const FormDisabledReadonly = FormDisabledTpl.bind({});
+// 嵌套结构与校验信息
+const NestValidatorFormTpl = () => {
+  const layout = {
+    labelCol: {
+      span: 2
+    },
+    wrapperCol: {
+      span: 12
+    }
+  };
+  /* eslint-disable no-template-curly-in-string */
+  const validateMessages = {
+    required: '${label} is required!',
+    types: {
+      email: '${label} is not a valid email!',
+      number: '${label} is not a valid number!'
+    },
+    number: {
+      range: '${label} must be between ${min} and ${max}'
+    }
+  };
+  const onFinish = values => {
+    console.log(values);
+  };
+  return React.createElement(Form, Object.assign({}, layout, {
+    name: "nest-messages",
+    onFinish: onFinish,
+    validateMessages: validateMessages
+  }), React.createElement(Form.Item, {
+    name: ['user', 'name'],
+    label: "Name",
+    rules: [{
+      required: true
+    }]
+  }, React.createElement(Input, null)), React.createElement(Form.Item, {
+    name: ['user', 'email'],
+    label: "Email",
+    rules: [{
+      type: 'email'
+    }]
+  }, React.createElement(Input, null)), React.createElement(Form.Item, {
+    name: ['user', 'age'],
+    label: "Age",
+    rules: [{
+      type: 'number',
+      min: 0,
+      max: 99
+    }]
+  }, React.createElement(InputNumber, null)), React.createElement(Form.Item, {
+    name: ['user', 'website'],
+    label: "Website"
+  }, React.createElement(Input, null)), React.createElement(Form.Item, {
+    name: ['user', 'introduction'],
+    label: "Introduction"
+  }, React.createElement(Input.TextArea, null)), React.createElement(Form.Item, {
+    wrapperCol: Object.assign(Object.assign({}, layout.wrapperCol), {
+      offset: 8
+    })
+  }, React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, "Submit")));
+};
+export const NestValidatorForm = NestValidatorFormTpl.bind({});