forms 相关问题

我的表格页面我的表格页面 <template> <AForm ref="form" :initial-values="initialValues" @finish="onFinish" class="sideform" > <div class="head"> <h3>Search</h3> </div> <div class="wrapper"> <AFormItem label="Patient Last Name" name="PLastName"> <AInput size="small" /> </AFormItem> <AFormItem label="Patient First Name" name="PFirstName"> <AInput size="small" /> </AFormItem> </div> <div class="button_area"> <AButton class="cancel_btn" @click="resetForm">Clear</AButton> <AButton html-type="submit" class="save_btn">Search</AButton> </div> </AForm> </template> <script lang="ts"> import { defineComponent, ref, onMounted, watch } from 'vue'; import { Form as AForm, FormItem as AFormItem, Input as AInput, Select as ASelect, Button as AButton, message as AMessage } from 'ant-design-vue'; import NumericInput from '../../../../components/UIComponents/NumericInput/index.vue'; import DatePicker from '../../../../components/UIComponents/Datepicker/index.vue'; import * as mainMenuAPI from "@/APIservices/MainMenusServices"; export default defineComponent({ name: 'Index', components: { AForm, AFormItem, AInput, ASelect, AButton, DatePicker, NumericInput }, emits: ['onSearch', 'onClear'], setup(_, { emit }) { const form = ref<any>(null); const data = ref({ ClientDetails: [], StatusDetails: [], }); const FinClasses = ref([]); const initialValues = ref({ PLastName: '', PFirstName: '', }); onMounted(() => { fetchClientDetails(); fetchDropdownData(); }); const fetchClientDetails = async () => { try { const response = await mainMenuAPI.GetClientDetails(); data.value = response.data; } catch (err) { AMessage.error('Error occurred'); } }; const fetchDropdownData = async () => { try { const response = await mainMenuAPI.GetUserDropdownData(); FinClasses.value = response.data.Table1; } catch (err) { AMessage.error('Error occurred'); } }; const onFinish = (values: any) => { searchData(values); }; const searchData = (values: any) => { if (!values.ReferredBy) values.ReferredBy = ''; if (!values.Status) values.Status = ''; if ( values.PFirstName || values.PLastName || ) { emit('onSearch', values); } else { AMessage.warn('User must input values for search!!!'); } }; const resetForm = () => { if (form.value) { form.value.resetFields(); } emit('onClear'); }; const filterOption = (input: string, option: any) => { return option?.label ? (option.label as string).toLowerCase().includes(input.toLowerCase()) : false; }; return { form, data, FinClasses, initialValues, onFinish, resetForm, filterOption, }; }, }); </script> 当我尝试访问 form.value 时，它似乎为空或不包含预期值。由于此问题，我无法执行编辑、添加或清除表单中的数据等关键功能。我怀疑表单的初始化、绑定或更新方式可能存在问题。我目前正在使用 Vue 3，想知道是否应该采取特定步骤或更正以确保正确捕获和更新表单值。我的代码中是否有一些我可能会忽略的东西？如何在 Vue 3 中可靠地检索和管理表单值？您的<script>标签的内容包含一个错误，该错误会阻止组件正常运行。最有可能的是，每当安装此组件时，您的开发控制台就会出现错误，这会提供有关错误发生位置的更多信息。也就是说，在 searchData 中，你有一个 if 条件： if ( values.PFirstName || values.PLastName || ) { // do stuff } 您需要删除第二个逻辑 OR 运算符 (||) 或添加第三个表达式。也许您有第三种表达方式，当您删除它时您忘记删除||。您的问题最令人惊讶的不是错误本身，而是它暗示您没有使用现代 IDE。我不应该推荐一个，但请注意，大多数（如果不是全部）现代 IDE 都会实时突出显示语法错误（只要它们 - IDE - 针对您编码的任何语言进行了正确配置）。即使对于经验丰富的开发人员来说，这种类型的语法和复制/粘贴错误也很常见，但他们使用的工具可以立即突出显示这些错误，并当场修复。

forms vue.js vuejs3 antd

回答 1 投票 0

Azure AD B2C：susi 用户流布局错误：正则表达式中类中的字符无效

我正在使用 Azure B2C 和标准 susi 用户流程。页面布局版本是2.17。我们正在使用自定义 HTML 页面，但我认为问题与此无关。请看一下屏幕...

html forms azure-ad-b2c

回答 1 投票 0

如何检查表单是否至少填写了一个字段

我正处于构建网站的最后阶段，还剩下一项关键任务：设置一些表单验证，阻止用户提交空白搜索。我知道以下帖子，但...

javascript jquery forms

回答 4 投票 0

forms 相关问题

最新问题