チーム開発 ユーザー新規登録/ログインページ エラー表示修正

エラーメッセージの表示修正を行いました。

現状では下記画像のように、ページ上部にまとめて表示させるようにしていましたが、

f:id:kobegoro:20200716075630p:plain


これを下記のように、フォームの下に表示させるようにします。

f:id:kobegoro:20200716075819p:plain


エラーメッセージ用の部分テンプレートにまとめて記述をしていたのを

_error_messages.html.haml

- if resource.errors.any?
  #error_explanation
    %h3
      = I18n.t("errors.messages.not_saved",                 |
        count: resource.errors.count,                       |
        resource: resource.class.model_name.human.downcase) |
    %ul
      - resource.errors.full_messages.each do |message|
        %li= message


フォームの下に個別に記述していきました。

new.html.haml

.user-form__field__input
= f.text_field :nickname, autofocus: true, placeholder: "例)フリマ太郎"
  - if @user.errors.include?(:nickname)
    .alert__sign-up
      = @user.errors.full_messages_for(:nickname).first

include?(attribute)を用いることで属性単位のエラー有無を判別し、
full_messages_for(attribute)を使い、特定の属性に関するエラーメッセージを取得しました。