决战antd中的表单form（vue/ts）

不太习惯antd的官方文档让我踩了不少坑。总结一下粗浅的使用方式。要同时引入form和form-item。form-item包裹在需要作为表单项目

引入form

    <a-form
      :form="form"
    >
         <a-form-item>
          <a-input
            v-decorator="[ `longitude`, validatorRules.longitude]"
          />
        </a-form-item>
    </form>

这个:form="form"的form是vue的一个data，需要在created的时候初始化。

    created () {
      this.form = this.$form.createForm(this)
    }

表单验证

而需要引入form-item通常是因为需要对收集到的数据进行验证v-decorator="[ 'id', 一些选项]"，既可以直接放在需要被验证的元素里，也可以单独独立出来方便管理。其中ID是任意但唯一的，是这个表单项的名字

        <a-form-item>
          <a-input
            v-decorator="[ `test`, validatorRules.test]"
            class="input_class"
            :disabled = "IsDisabled"
          />
        </a-form-item>

如果表单项很多，可以把验证的选项规则放到data中去。注意验证规则是选项validatorRules.test下面的rules。除了rules之外还有trigger、validateFirst等等字段。

	public validatorRules = {
	      test: {
	        rules: [
	          {
	            pattern: /正则表达式/,
	            message: '这里是红色字提示的内容'
	          }
	        ]
	      },

rules里面提供的字段有，可以通过这些基本 字段进行默认的一些校验：

但是这个校验是在输入的时候进行的校验，但是没有v-model，输入的数据是没有被同步到data中的，也无法在提交更改的时候完成阻止。

form的数据收集

在有form的组件初始化的时候，不仅要创建form，还需要把数据放入form中。这里是父组件传入的值FatherItem，每当组件初始化父组件都会传值进来，此时找到需要的值，传到id里面。

下面用官网的数据收集的一个例子，id分别为note和选择器的gender，那输入的值应该是输入的内容和选项的value，这些的值会被自动放入this.form.validateFields((err, values) => { })的value中去：

 <a-form-item label="Note">
      <a-input
        v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
      />
    </a-form-item>
    <a-form-item label="Gender">
      <a-select
        v-decorator="[
          'gender',
          { rules: [{ required: true, message: 'Please select your gender!' }] },
        ]"
        placeholder="Select a option and change input text above"
        @change="handleSelectChange"
      >
        <a-select-option value="male">
          male
        </a-select-option>
        <a-select-option value="female">
          female
        </a-select-option>
      </a-select>
    </a-form-item>

因此this.form.validateFields((err, values) => { })之后输出的值是：

 this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });

然后想要改变表单里项的value需要this.form.setFieldsValue({ id: changeValue});

    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
      });
    },

个人运用的一个例子：

    @Watch('FatherItem')
    onListChange () {
      let model = Object.assign({}, this.FatherItem)
      this.form.setFieldsValue(pick(model, 'test', 'weight'))
    }

form的提交验证

核心是阻止默认事件：e.preventDefault()和this.form.validateFields((err: any, values: any) => {}))

    submitEdit (e: any) {
      e.preventDefault()
      let params: any = {}
      // value里面有收集到的全部数据
      this.form.validateFields((err: any, values: any) => {
        if (err) {
          this.$notification.warning({
            message: this.title,
            description: '校验不通过'
          })
        } else {
        // 如果验证通过，就把收集到的数据传递给参数
          params.weight = values.weight
          params.test = values.test
          // 发送参数，执行接口
          Dealer.update(params)
        }
      })
    }