[英]How to correctly validate and submit if form is valid with ant design form with typescript
我用react,redux,typescript ant設計構建了一個簡單的表單。 按照ant設計文檔,我使用提供的getFieldDecorator
和Form.create
方法創建了一個小表單。 到目前為止,一切工作都很好,並且在將數據輸入字段時,驗證由螞蟻設計本身來處理。 我的主要問題是表單提交。 我只想在表單經過驗證且表單為“有效”的情況下提交數據。
官方文檔使用validateFields
來驗證表單,並返回包含錯誤的變量並返回進一步執行,以使表單不會被提交。 現在使用打字稿,我具有以下簽名: validateFields(): void;
<-我使用此方法在提交表單時觸發驗證,然后調用getFieldsError(names?: Array<string>): Record<string, string[] | undefined>;
getFieldsError(names?: Array<string>): Record<string, string[] | undefined>;
現在,如果您查看示例代碼,則丑陋的部分正在使用變量“ allValid”來檢查表單是否有效。 我認為,如果表格有效,則必須有一種更簡單的方法來驗證和提交數據。
const UploadForm: FunctionComponent<FormComponentProps> = props => {
const { getFieldDecorator, validateFields, getFieldsError } = props.form;
const dispatch = useDispatch();
return (
<Form
{...formItemLayout}
onSubmit={event => {
event.preventDefault();
validateFields();
const validationErrors = getFieldsError();
let allValid = true;
console.log(validationErrors);
for (let key in validationErrors) {
console.log(validationErrors[key]);
if (validationErrors[key] !== undefined) {
allValid = false;
break;
}
}
if (allValid) {
dispatch(submitFormData());
}
}}
>
<ImageComponent />
<Form.Item label="E-mail">
{getFieldDecorator("email", {
rules: [
{
type: "email",
message: "The input is not valid E-mail!"
},
{
required: true,
message: "Please enter your E-mail!"
}
]
})(
<Input
prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
placeholder="Your e-mail"
/>
)}
</Form.Item>
<Form.Item {...buttonItemLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default Form.create < FormComponentProps > {}(UploadForm);
您可以使用Object.values()和Array.find()查找undefined
值。
validateFields();
const validationErrors = Object.values(getFieldsError());
if (!validationErrors.find(e => e === undefined)) dispatch(submitFormData());
或者,您可以禁用Submit Button
。
驗證每個Form.Item
,並僅在所有驗證狀態為success
時才允許提交。
<Button
type="primary"
htmlType="submit"
disabled={!(validateEmptyField(name) && validateEmptyField(surName))}
>
Submit
</Button>;
使用validateStatus
驗證每個Form.Item
:
function FromValidate() {
const [name, setName] = useState('');
const [surName, setSurName] = useState('');
return (
<Flexbox>
<Form
onSubmit={e => {
e.preventDefault();
console.log('name', name);
console.log('surName', surName);
}}
>
<Form.Item
label="Name"
required={true}
validateStatus={validateEmptyField(name) ? 'success' : 'error'}
help={!validateEmptyField(name) && 'Name cannot be empty'}
>
<Input
placeholder="Unique Identifier"
value={name}
onChange={e => setName(e.target.value)}
/>
</Form.Item>
...
<Form.Item>
<Button
type="primary"
htmlType="submit"
disabled={
!(validateEmptyField(name) && validateEmptyField(surName))
}
>
Submit
</Button>
</Form.Item>
</Form>
</Flexbox>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.