form表单模板(ant)

// 创建表单实例
data() {
this.form = this.$form.createForm(this);
return {

// html中

  <a-form-item>
    <a-button type="primary" @click="handleSubmit">下一步</a-button>
  </a-form-item>
</a-form>

// 特性 使用v-decorator代替了v-model form不在双向绑定需要手动同步 step.payAccount,初始名处从vuex中同步 或者
// this.form.setFieldsValue({ fieldA: this.fieldA });
// 相当于refs选中 只适合提交类表单
data() {
this.form = this.$form.createForm(this);
return {
formItemLayou: {
labelCol: { span: 4 },
wrapperCol: { span: 14 }
}

// 提交时的验证
handleSubmit() {
const { form, $router, $store } = this;
form.validateFields((err, values) => {
console.log(err, 6, values);
if (!err) {

// 自定义组件(表单) 要在 rules加validator 才可通过 form.validateFields((err, values) => { 获取到值与校验操作
rules: [
{
required: true,
message: ‘请输入收款账号’,
validator: (rules, value, callback) => {
if (value && value.number) {
callback();
//有值变化 继续回调
} else {
callback(false);
// 没值返回false 校验失败 阻止提交
}
}
}
]