Как условно открыть лайтбокс при ошибке отправки? - PullRequest
Новая
       8

Как условно открыть лайтбокс при ошибке отправки?

0 голосов
/ 16 мая 2018

У меня есть amp-form, который отправляет адрес с POST, и 2 вида ошибок, которые могут вернуться: {error: "precisionRequired"} и {error: "invalidZipcode"}.

У меня также есть 2 amp-lightboxс соответствующим текстом и формами в случае ошибки с адресом пользователя, поэтому я хотел бы открыть правильный лайтбокс в соответствии с полученной ошибкой.

Вот фрагмент моего кода: 

<form method="POST" action-xhr="/epiceries"
  on="submit-success: AMP.navigateTo(url='/epiceries'); submit-error: precisionRequired.open">
  <input type="text" name="address">
  <button type="submit"> Submit </button>
</form>

<amp-lightbox id="invalidZipcode" layout="nodisplay">
  [... some form when the zipcode is not deliverable]
</amp-lightbox>

<amp-lightbox id="precisionRequired" layout="nodisplay">
  [... some content to ask the user to give us a complete address, not just a city :) ]
</amp-lightbox>

Я знаю, что могу использовать состояние для условной визуализации интересующей меня детали в одном лайтбоксе, например: 

<form method="POST" action-xhr="/epiceries"
  on="submit-success: AMP.navigateTo(url='/epiceries'); submit-error: AMP.setState({error: event.response.error}), lightbox.open">
  <input type="text" name="address">
  <button type="submit"> Submit </button>
</form>

<amp-lightbox id="lightbox>
  <div [class]="error == 'invalidZipcode' ? '' : 'hidden'">
    [... some form when the zipcode is not deliverable]
  </div>

  <div [class]="error == 'precisionRequired' ? '' : 'hidden'">
    [... some content to ask the user to give us a complete address, not just a city :) ]
  </div>
</amp-lightbox>

, но, похоже, взломанный, и я бы хотелиметь 2 разных лайтбокса, как в моем первом фрагменте.

Можно ли условно открыть лайтбокс на основе ответа сервера?если да, то как?

1 Ответ

0 голосов
/ 16 мая 2018

Вы можете реализовать свой собственный лайтбокс с помощью CSS и показать его в зависимости от результата: 

<div id="lightboxErrorZipcode" class="lightbox" 
     [hidden]="error !== 'invalidZipcode'" hidden>
    [... some form when the zipcode is not deliverable]
  <button on="tap:lightboxErrorZipcode.close">Close</button>
</div>
...

Лично я бы использовал описанный вами подход условного рендеринга содержимого лайтбокса (одно из предложений - использовать скрытый атрибут, как в моем примере). Таким образом, вам не нужно переопределять поведение лайтбокса в CSS.

...