Проверка асинхронного поля формы в дизайне муравьев - PullRequest
Новая
       5

Проверка асинхронного поля формы в дизайне муравьев

0 голосов
/ 23 ноября 2018

Как проверить поля формы асинхронно в ant design? 

 <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.Так как я могу показать сообщение об ошибке?

1 Ответ

0 голосов
/ 24 ноября 2018

Вы отсутствуют await до validateZipcode и async до 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}`);
}

Вам необходимо добавить ее, потому что на самом деле невозможно отследить полноту асинхронной операции в функции синхронизации .

Другое решение состоит в том, чтобы снять отметку 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}`);
}
...