feat(Form): support using CheckboxGroup

src/checkbox-group/index.js

@@ -1,10 +1,11 @@
 import { createNamespace } from '../utils';
+import { FieldMixin } from '../mixins/field';
 import { ParentMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('checkbox-group');
 
 export default createComponent({
-  mixins: [ParentMixin('vanCheckbox')],
+  mixins: [ParentMixin('vanCheckbox'), FieldMixin],
 
   props: {
     max: [Number, String],

src/checkbox/index.less

@@ -15,6 +15,10 @@
     cursor: default;
   }
 
+  &--horizontal {
+    margin-right: @padding-sm;
+  }
+
   &__icon {
     flex: none;
     height: 1em;

src/field/index.js

@@ -118,6 +118,16 @@ export default createComponent({
     formValue() {
       return this.children ? this.children.value : this.value;
     },
+
+    formValueEmpty() {
+      const { formValue } = this;
+
+      if (Array.isArray(formValue)) {
+        return !formValue.length;
+      }
+
+      return !formValue;
+    },
   },
 
   methods: {
@@ -144,7 +154,7 @@ export default createComponent({
         const messages = [];
 
         this.rules.forEach(rule => {
-          if (rule.required && !this.formValue) {
+          if (rule.required && this.formValueEmpty) {
             messages.push(rule.message);
           }
         });

src/form/demo/FieldType.vue

@@ -9,6 +9,21 @@
         <van-checkbox v-model="checkbox" slot="input" shape="square" />
       </van-field>
 
+      <van-field name="checkboxGroup" :label="$t('checkboxGroup')">
+        <van-checkbox-group
+          v-model="checkboxGroup"
+          slot="input"
+          direction="horizontal"
+        >
+          <van-checkbox name="1" shape="square">
+            {{ $t('checkbox') }} 1
+          </van-checkbox>
+          <van-checkbox name="2" shape="square">
+            {{ $t('checkbox') }} 2
+          </van-checkbox>
+        </van-checkbox-group>
+      </van-field>
+
       <van-field name="radio" :label="$t('radio')">
         <van-radio-group v-model="radio" direction="horizontal" slot="input">
           <van-radio name="1" class="demo-radio">{{ $t('radio') }} 1</van-radio>
@@ -47,6 +62,7 @@ export default {
       stepper: '步进器',
       checkbox: '复选框',
       fieldType: '表单项类型',
+      checkboxGroup: '复选框组',
       requireCheckbox: '请勾选复选框',
     },
     'en-US': {
@@ -58,6 +74,7 @@ export default {
       stepper: 'Stepper',
       checkbox: 'Checkbox',
       fieldType: 'Field Type',
+      checkboxGroup: 'Checkbox Group',
       requireCheckbox: 'Checkbox is required',
     },
   },
@@ -69,6 +86,7 @@ export default {
       slider: 50,
       stepper: 1,
       checkbox: false,
+      checkboxGroup: [],
       switchChecked: false,
     };
   },

src/radio/index.less

@@ -16,7 +16,7 @@
   }
 
   &--horizontal {
-    margin-right: 12px;
+    margin-right: @padding-sm;
   }
 
   &__icon {