Form

Introduction to using the Form component

Dropdown - a drop-down menu used to let users take the next interaction for selected data. Clicking the button opens a floating area containing a series of options. It looks similar to Select, but the biggest difference is that Dropdown triggers the option event when an option is clicked and then closes the floating area.

Example

<bpa-form
  :model="exampleForm"
  ref="refExampleForm"
  :rules="exampleRules"
>
  <bpa-form-item
    label="Name"
    prop="name"
    required
    labelFor="thisIDIsMustTheSame"
    @validate="onValidate"
  >
    <bpa-input
      v-model="exampleForm.name"
      id="thisIDIsMustTheSame"
    />
  </bpa-form-item>
</bpa-form>

data() {
  return {
    exampleRules: {
      name: [
        { required: true, message: 'name is required' },
        { min: 3, max: 5, message: 'at least 3 to 5 words', trigger: 'change' }
      ]
    }
  }
}

Validation

// required
const rules = {
  input:[{ required: true, message: 'This field is required', trigger: 'blur' }]
}

// multiple
const rules = {
  check:[{ required: true, type:'array', message: 'please check', trigger: 'change' }]
}

// multiple
const rules = {
  check:[{ required: true, type:'array', message: 'please check', trigger: 'change' }]
}

// max and min
const rules = {
  check:[{ min:0, max: 3, type:'array', message: 'please check(max 3)', trigger: 'change' }]
}

// password
const form = {
   password:'',
   confirm:''
 }
 const validatePsw = (rule: Array<any>, value: string, callback: (par?: any)=>{}) => {
   if (value !== form.password) {
     let msg = 'Not Match!'
     callback(new Error(msg));
   } else {
     callback();
   }
 }
 const rules = {
   confirm:[
     { required: true, validator: validatePsw, trigger:'blur'}
   ],
 }

// regular express
const rules = {
   password:[
     { 
       pattern: /(?=.{12,})((?=.*\d)(?=.*[a-z])(?=.*[A-Z])|(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_])|(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_])).*/,  
       trigger: 'blur' 
     }
   ],
 }ja

Fieldset

<fieldset class="bpa-fieldset">
  <legend>Experience</legend>
  <div class="bpa-fieldset-container">
    <bpa-form-item
      label="Company"
      prop="company"
      labelFor="testModelId2"
     >
      <bpa-input
         v-model="exampleForm.company"
         id="testModelId2"
      />
    </bpa-form-item>
  </div>
</fieldset>

bpa-form attributes

Name	Value	Type	Default	Required	Note
model		Object	random
rules		Object (async-validator)
autofocus		Boolean	true		automatic focus

bpa-form methods

Name	Parameters
validate	Function () : Promise({valid: booleaml; error: object})

bpa-form-item attributes

Name	Value	Type	Default	Required	Note
prop		String
label		String
labelFor		String
required		Boolean
error		Boolean
hint		String
rules		[Object, Array]
model		[Object, Array, Boolean, String, Number]

bpa-form-item methods

Name	Parameters	Note
validate	{ valid: boolean, message: string }

Demo