ant design of vue 学习之表单Form（升级）

数据获取以及设置

//获取一个输入控件的值  Function(fieldName: string)
let myDate = this.form.getFieldValue("startDate");
//获取一组输入控件的值，如不传入参数，则获取全部组件的值   Function([fieldNames: string[]])
let value = this.form.getFieldsValue(["startDate","endDate"]);
let value = this.form.getFieldsValue();

//设置一组输入控件的值
this.form.setFieldsValue({
	startDate:res.result["startDate"],
	endDate:res.result["endDate"],
})
this.form.setFieldsValue({
	userName:{
		label:res.result["userName"],
		key:res.result["userNameId"]
	}
})

labelInValue（下拉框）

<a-form-item label="第一完成人"
             v-bind="formItemLayout">
  <a-select labelInValue
            placeholder="请选择第一完成人名字"
            v-decorator="['firstCompleter',{rules: [{ required: true, message: '请选择第一完成人名字'}]}]"
            @change="changeFirstCompleters">
	    <a-select-option v-for="item in firstCompleters"
	                     :key="item.id"
	                     :value="item.pid">{{item.userName}}</a-select-option>
	</a-select>
</a-form-item>

绑定的value需要是String类型，否则需要转字符串 :value=“String(item.id)”

setFormValues (data) {
	let {
		firstCompleterPid,
        firstCompleterUserName,
	} = data;
	let firstCompleter = {
      label: firstCompleterUserName,
      key: firstCompleterPid
    };
    data["firstCompleter"] = firstCompleter;
    Object.keys(data).forEach(key => {
      this.form.getFieldDecorator(key);
      let obj = {};
      obj[key] = data[key];
      this.form.setFieldsValue(obj);
    });
}

自定义验证（方法一 validator）

<template v-if="(this.form.getFieldValue('videoSource') || 1) === 1">
   <a-form-item label="腾讯视频编码"
                v-bind="formItemLayout">
	     <a-input :maxLength="50" v-decorator="['vid', { rules: [{ required: true,validator: vidValidator }] }]"
	              placeholder="请输入腾讯视频编码" /> 
   </a-form-item>
</template>                          

methods: {
    // 腾讯编码验证
    vidValidator (rule, value, callback) {
      const idcardReg = /^[0-9a-zA-Z]*$/g
      if (!idcardReg.test(value)) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('非法格式')
      }
      // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
      callback()
    },
}

自定义验证（方法二 pattern）

<a-form-item>
  <a-input size="large"
           type="text"
           placeholder="手机号"
           v-decorator="[
      'mobileNumber',
      {
        rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }],
        validateTrigger: 'change'
      }
    ]">
  </a-input>
</a-form-item>