vue-form10

    1.1.32 • Public • Published

    vue-form10

    Install

    npm i -S vue-form10

    Usage

    <template>
      <div id="app">
        <Form10 :schema="schema" :plugins="form10plugins" v-model="model"/>
        <pre>{{JSON.stringify(model,false,4)}}
        </pre>
      </div>
    </template>
     
    <script>
    import Form10 from 'vue-form10';
    import form10plugins from 'vue-form10/libs/plugins';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import Vue from 'vue';
     
    Vue.use(ElementUI);
     
    export default {
      name: 'app',
      data() {
        return {
          model:{
     
          },
          form10plugins,
          schema: {
            type: 'object',
            title: 'obj',
            properties: {
              str: {
                type: 'string',
                title: 'str',
              },
              obj: {
                type: 'object',
                title: 'obj',
                properties: {
                  str: {
                    type: 'string',
                    title: 'str',
                  },
                },
              },
            },
          },
        };
      },
      components: {
        Form10,
      },
    };
    </script> 

    Props

    v-model

    Form10's model

    options

    Type:Object
    Required:false

    options.inline

    Type:Boolean
    Required:false
    If the label and the input are on the same line.

    options.formProps

    Type:Object
    Required:false
    Pass to form10's topmost el-form component.

    options.inheritState

    Type:Object
    Required:false
    Used to compose form10's vuex state. Form10 has its own vuex state, so its format plugins can't access its $parent's state. Pass this.$store.state to this option and the format plugins can access the state by this.$store.state.inherit.

    options.typeDefaultFormat

    Type:Object
    Required:false
    Default:{ object: "object", array: "array", number: "number", integer: "number", string: "string", boolean: "boolean", null: "null" }
    If a schema has type but doesn't have format, form10 uses typeDefaultFormat[type] to decide its format.

    schema

    Type:Object
    Required:true

    plugins

    Type:Array
    Required:true

    Methods

    submit

    Function():Object

    Returns: If has error: { error }
    If not: { value }

    Reference

    Json Schema Validation

    Compared with angular-schema-form

    • required:["a","b"]
    • key: "address.street"
    • type: "text"
    • title: "Street"
    • notitle: false
    • description: "Street name"
    • validationMessage: "Oh noes, please write a proper address"
    • onChange: "valueChanged(form.key,modelValue)"
    • feedback: false(try to set :status-icon="true" on el-form)
    • disableSuccessState: false
    • disableErrorState: false
    • placeholder: "Input..."
    • ngModelOptions: { ... }
    • readonly: true
    • htmlClass: "street foobar"
    • fieldHtmlClass: "street"
    • labelHtmlClass: "street"
    • copyValueTo: "address.street"
    • condition: "person.age < 18"
    • destroyStrategy: "remove"

    Keywords

    none

    Install

    npm i vue-form10

    DownloadsWeekly Downloads

    87

    Version

    1.1.32

    License

    none

    Unpacked Size

    1.02 MB

    Total Files

    45

    Last publish

    Collaborators

    • blackmiaool