ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
93.72k stars 51.17k forks source link

Validating object values on antdv form #52613

Closed hakimov-dev closed 2 weeks ago

hakimov-dev commented 2 weeks ago

For example i've an object form like that:

const form = reactive({
  user: {
    middle_name: "", 
    username: "",
    first_name: "",
    last_name: "",
    phone_number: "",
    gender: "",
    date_of_birth: "",
    is_employee: false,
  },
  work_position: "",
  passport: {
    is_deleted: false,
    deleted_at: "",
    country: "",
    document_number: "",
    issue_date: "",
    expiry_date: "",
    is_id: false,
  },
  branch: "",
  marital_status: "",
});

So the problem here i can't check the user.last_name is valid or not like in that code:

        <a-form
          class="w-full flex flex-col items-start justify-start"
          :model="form"
          name="basic"
          autocomplete="off"
          layout="vertical"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
            <a-form-item
              class="w-[49%]"
              label="Last name/Family name"
              name="user.last_name"
              :rules="[{ required: true, message: 'Please fill the input!' }]"
            >
              <a-input size="large" v-model:value="form.user.last_name" />
            </a-form-item>
   </a-form>

Whenever i type something on that input i'm getting required error:

Image

Like that and i can't find solution except that article: https://stackoverflow.com/questions/73217982/vue-js-antd-validation-issue on overflow which has no solutions.

And I'm using antd on nuxt which is antdv.

github-actions[bot] commented 2 weeks ago

Hello @hakimov-dev, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

你好 @hakimov-dev,为了能够进行高效沟通,我们对 issue 有一定的格式要求,你的 issue 因为不符合要求而被自动关闭。你可以通过 issue 助手 来创建 issue 以方便我们定位错误。谢谢配合!