Antデザインでフォームフィールドを非同期で検証する方法は?
<FormItem>
{getFieldDecorator('zipcode', {
initialValue: `${customer && customer.zipcode ? customer.zipcode : ''}`,
rules: [
// { required: true, message: 'Please input your Zipcode' },
{ validator: this.handlezipCodeChange },
],
})(
<Input
prefix={
<Icon type="zipcode" style={{ color: 'rgba(0,0,0,.25)', visibility: 'hidden' }} />
}
type="number"
placeholder="Zipcode"
// onChange={this.handlezipCodeChange}
/>
)}
</FormItem>
関数呼び出し
handlezipCodeChange = (rule, value, callback) => {
if (!value) {
callback('Please input your zipcode');
}
if (value.length < 5) {
callback('Please enter minimum length of 5');
}
if (value.length > 5) {
callback('Please enter maximum length of 5');
}
if (value.length === 5) {
const validateZipCode = validateZipcode(value);
if (
validateZipCode &&
validateZipCode.result &&
validateZipCode.result.zipcodeInfo === null
) {
callback('Seems to be Invalid Zipcode');
} else {
callback();
}
}
};
export async function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
API応答からのエラーメッセージを表示する方法API呼び出しが完了するまでに時間がかかるため、API要求が完了する前に検証関数呼び出しが完全に実行されます。では、どうすればエラーメッセージを表示できますか?
あなたは missingawait
before validateZipcode
およびasync
before handlezipCodeChange
:
handlezipCodeChange = async (rule, value, callback) => {
...
if (value.length === 5) {
const validateZipCode = await validateZipcode(value);
...
}
また、コメントで述べたように、await
をvalidateZipcode
関数に追加する必要があります。
export async function validateZipcode(zipcode) {
return await request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}
sync関数で非同期操作の完全性を把握することは不可能 なので、追加する必要があります。
その他の解決策は、async
からvalidateZipcode
のマークを外して、次にPromiseベースとして使用することです。
handlezipCodeChange = (...) => {
...
if (value.length === 5) {
const successHandler = ({result = {}}) => result.zipcodeInfo === null ? callback('Seems to be Invalid Zipcode') : callback();
validateZipcode(value)
.then(successHandler)
.catch( error => callback("Can't validate Zip code") );
}
}
export function validateZipcode(zipcode) {
return request(`/api/getZipcodeInfo?zipcode=${zipcode}`);
}