常連

railsでform_withを使って送信フォームを作っています。
フォームを入力必須にしたいのですが、うまくいきません。
htmlに変換されるときに、inputタグにrequiredをつけるだけなのですが、どうすればよいでしょうか？

下記のようにしたら、
<input html="required">
とhtml=がついてしまい、ダメでした

```haml
= form_with url:article_path, local: true do |f|
  = f.text_field :title, html:"required"
  = f.text_field :content

  = f.submit "送信"

```

railsのform_withを入力必須にする

### 前提・実現したいこと

漫画閲覧サイトを作ろうとしています。
モーダル内でスライダーで閲覧できるようにしたいのですが、
知識不足でエラーが解決できません。
皆様のお力貸していただければと思っております。

eachで回して動的にid名を生成させようとしてましたらエラーが発生し、
前に進めれない状況です。
何卒、よろしくお願いいたします。

### 発生している問題・エラーメッセージ

```
ActionView::Template::Error (undefined method `map' for "modal-content-1":String):
```

### index.html.haml

```ruby
  - @mangas.each do |manga|
        - manga_pages = manga.to_s.length
        - manga.manga_image.each.with_index(1) do |manga_img, i|
          %label.mpo-modal-close{:for => "mpo-modal-controller"} ×
          -if i == 1
            %input{id = "modal-content-#{i}"}.modal-radio{:checked => "checked", :hidden => "", :name => "content-nav", :type => "radio"}/
          -else
            %input{id = "modal-content-#{i}"}.modal-radio{:hidden => "", :name => "content-nav", :type => "radio"}/
          %div(class="content-#{i}, mpo-modal-slide")
            .mpo-modal-content
              = image_tag manga_img.to_s, alt: "#{manga_img}"
              .mpo-modal-nav
              - if i > 1
                %label.prev-slide{:for => "modal-content-#{i - 1}"} ‹‹
              - else
                = nil

              - if i < manga_pages
                %label.next-slide{:for => "modal-content-#{i + 1}"} ››
              - else
                = nil
```


### 補足情報（FW/ツールのバージョンなど）
centos
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
Rails 5.2.0
gem 'mysql2', '>= 0.4.4', '< 0.6.0'
gem 'carrierwave'
→2.7.6

下記のサイトを参考にスライダーを作成しようとしておりました。
https://codepen.io/marv117/pen/WvZdGV/

undefined method `map' for の解決方法がわかりません

### 前提・実現したいこと

現在、フリマの仮装アプリを制作しております。
商品編集ページの実装ですが
カテゴリーが呼び込めません。

自分の中で
色んな記事を噛み砕いた内容になってますが、記述ミス、いらない内容あるかもです。
（カテゴリーと画像の導入以外のjsは触ってない箇所もあります）


■商品編集機能実装中にカテゴリーの機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

```
ActiveRecord::RecordNotFound in ProductionsController#edit
Couldn't find Category without an ID

```

### 該当のソースコード

```ここに言語名を入力
production_controller.rb

def edit
    @production = Production.find(params[:id])
    @category = Category.where(ancestry: "")
~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~
end

category.js

$(document).ready(function(){
  $(function(){
    function appendOption(category){
      var html = `<option value="${category.id}" data-category="${category.id}">${category.name}</option>`;
      return html;
    }
    // 子カテゴリーの表示作成
    function appendChidrenBox(insertHTML){
        var childSelectHtml = '';
        childSelectHtml = `<div class='exhibitionPage__main__contents__detail__category__choose__added' id= 'children_wrapper'>
                            <div class='exhibitionPage__main__contents__detail__category__choose1'>
                              <i class='fas fa-chevron-down exhibitionPage__main__contents__detail__category__choose--arrow-down'></i>
                              <select class="exhibitionPage__main__contents__detail__category__choose--select" id="child_category" name="production[category_id]">
                                <option value="---" data-category="---">---</option>
                                ${insertHTML}
                              <select>
                            </div>
                          </div>`;
        $('.products_new-product_explanation__category').append(childSelectHtml);
      }
  
      // 孫カテゴリーの表示作成
      function appendGrandchidrenBox(insertHTML){
        var grandchildSelectHtml = '';
        grandchildSelectHtml = `<div class='exhibitionPage__main__contents__detail__category__choose__added' id= 'grandchildren_wrapper'>
                                  <div class='exhibitionPage__main__contents__detail__category__choose2'>
                                    <i class='fas fa-chevron-down exhibitionPage__main__contents__detail__category__choose--arrow-down'></i>
                                    <select class="exhibitionPage__main__contents__detail__category__choose__box--select" id="grandchild_category" name="production[category_id]">
                                      <option value="---" data-category="---">---</option>
                                      ${insertHTML}
                                    </select>
                                  </div>
                                </div>`;
        $('.products_new-product_explanation__category').append(grandchildSelectHtml);
      }
  
      // 親カテゴリー選択後のイベント
      // 親はクラスのIDの方を選択してあげる
      $('#production_category').on('change', function(){
        var parent_category_id = document.getElementById('production_category').value; //選択された親カテゴリーの名前を取得
        if (parent_category_id != "選択してください"){ //親カテゴリーが初期値でないことを確認
          $.ajax({
            url: '/productions/category/get_category_children',
            type: 'GET',
            data: { parent_id: parent_category_id },
            dataType: 'json'
          })
          .done(function(children){
            $('#children_wrapper').remove(); //親が変更された時、子以下を削除する
            $('#grandchildren_wrapper').remove();
            var insertHTML = '';
            children.forEach(function(child){
              insertHTML += appendOption(child);
            });
            appendChidrenBox(insertHTML);
          })
          .fail(function(){
            alert('カテゴリー取得に失敗しました');
          })
        }else{
          $('#children_wrapper').remove(); //親カテゴリーが初期値になった時、子以下を削除する
          $('#child_category').remove();
        }
      });
  
      // 子カテゴリー選択後のイベント
      // これは元々HTMLに表示されているクラスをレシーバーとして指定する必要がある
      $('.products_new-product_explanation__category').on('change', '#child_category', function(){
        var child_category_id = $('#child_category option:selected').data('category'); //選択された子カテゴリーのidを取得
        if (child_category_id != "--"){ //子カテゴリーが初期値でないことを確認
          $.ajax({
            url: '/productions/category/get_category_grandchildren',
            type: 'GET',
            data: { child_id: child_category_id },
            dataType: 'json'
          })
          .done(function(grandchildren){
            if (grandchildren.length != 0) {
              $('#grandchildren_wrapper').remove(); //子が変更された時、孫以下を削除する
              var insertHTML = '';
              grandchildren.forEach(function(grandchild){
                insertHTML += appendOption(grandchild);
              });
              appendGrandchidrenBox(insertHTML);
            }
          })
          .fail(function(){
            alert('カテゴリー取得に失敗しました');
          })
        }else{
          $('#grandchildren_wrapper').remove(); //子カテゴリーが初期値になった時、孫以下を削除する
        }
      });
    });
  });

vies/production/edit.html.haml
~~~~~~~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 .category-wrapper
          = form_with model: @production :@category, local: true do |f|
            = f.label :category_id , class: 'wrapper__label category-wrapper-label', id: "wrapper__label--category" do
              カテゴリー：
              %span.required ※必須
              .category-wrapper-box
                .category-wrapper-select
                  .category-wrapper-select__box
                    = f.collection_select :category_id, Category.roots, :id, :name, {selected:@production.category.parent.parent.name}, { class: 'category-wrapper__category form-control', id: 'parent_category_edit', name: "" }
                .category-wrapper-select#children_wrapper
                  .category-wrapper-select__box
                    = f.collection_select :category_id,  @production.category.parent.parent.children, :id, :name{prompt: "選択してください", selected: @production.category.parent_id}, {class: 'listing-select-wrapper--edit__child--select', id: 'child_category_edit', name: "" }
                  .category-wrapper-select__box
                    = f.collection_select :category_id, @production.category.parent.children, :id, :name,{prompt: "選択してください", selected: @production.category.id}, {class: 'listing-select-wrapper--edit__grandchild--select', id: 'grandchild_category_edit', name: "product[category_id]" }

~~~~~~~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


get_category_children.json.jbuilder

json.array! @category_children do |child|
  json.id child.id
  json.name child.name
end

get_category_grandchildren.json.jbuilder

json.array! @category_grandchildren do |grandchild|
  json.id grandchild.id
  json.name grandchild.name
end
```

### 試したこと

付与した、クラスの名前
記述ミスないか
@production(:category_id)or@production(:category.id)
など、思いつくことは行ったのですが、うまくいかないのでご教授いただけると幸いです！！汗


### 補足情報（FW/ツールのバージョンなど）

rails 6.0.0

ここにより詳細な情報を記載してください。

カテゴリーの取得ができない　Couldn't find Category without an IDエラー

`haml-rails'を使って、HTMLをhamlに変換しました。
逆に、hamlをHTMLに変換したいのですが、どうすればよいですか？

hamlをHTMLに変換するには

### 環境
haml、Bootstrap４

### やりたいこと
ヘッダーを２段にしたい
![イメージ説明](8ee7a7ac1b773e8852ef83cfaa5f4b30.png)

```haml
%nav.navbar.navbar-header.navbar-expand-lg.fixed-top
  .col-12
    %a.navbar-brand.align-items-left{:href => "/"} 
      = image_tag("logo.png", width: '100%',alt: "logo")
    .text-rigth
      メールはこちら  

    #navbarSupportedContent.collapse.navbar-collapse
      %ul.navbar-nav.mx-auto
        %li.nav-item.active.justify-content-center.align-items-center
          %a.nav-link{:href => "#"}
            ナビ１
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ２
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ３
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ４
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ５

```

### できたこと
ナビを５つ２段目に並べることができた

### できないこと
メールが画像と同じ並び且つ右寄せ

### 調べたこと
flex-column　を navbar-collapseに入れてみて２段になりましたが、
ロゴの横にナビが来てしまった。

containerでヘッダーとナビを分けたが、ナビが右に寄ったため
text-centerにしたが変化がなかった。


ご教授よろしくお願いいたします。

【Bootstrap】ヘッダーを２段にしたい

①分からないこと：NoMethodError  private method `select' called for # の解決方法

②エラーが発生した機能：課題に対し回答を行うアプリの、回答に対するいいね機能の、いいね削除

③いいねをつけること、いいね数をカウントしてビューに表示することはできます



```postsIndexHtmlHaml
.posts__a__post__like
          - like = Like.where(post_id: post.id).where(user_id: current_user.id)

          - if like.present?
            .posts__a__post__liked__icon
　　　　　　　　　-# エラー発生箇所
              - like_id = Like.find_by(copy_id: copy.id, user_id: current_user.id).select("id")
              = link_to kadai_post_like_path(post.kadai_id,post.id,like_id),method: :delete do
                %i.fas.fa-heart

          - else
            .posts__a__post__like__icon
              = link_to kadai_post_likes_path(post.kadai_id,post.id),method: :post do
                %i.far.fa-heart

          .posts__a__post__like__count
            - count = Like.where(post_id: post.id).count
            = count
```

```likesContoroller
class LikesController < ApplicationController

  def create
    Like.create(post_id: params[:post_id], user_id: current_user.id)
  end

  def destroy
    like = Like.find(params[:id])
    like.destroy if like.user_id == current_user.id
  end

  private

  def like_params
    params.permit(:post_id)
  end
  
end
```

```postsController
  def index
    @posts = Post.order("created_at DESC")
  end
```

```postsRb
class Post < ApplicationRecord
  has_many :likes, dependent: :destroy
  has_many :comments, dependent: :destroy
  belongs_to :user
  belongs_to :kadai


  mount_uploader :image, ImageUploader
end
```

```likeRb
class Like < ApplicationRecord
  belongs_to :user
  belongs_to :post
  validates :user_id, presence: true
  validates :post_id, presence: true
end

```

NoMethodError  private method `select' called for # の解決方法がわからない

１回目のクリックの際にコピーもツールチップ表示もできないのですが、２回目以降だと出来ます。
原因が分かりません。
copyUrl自体は１回目でも呼ばれています。
```Haml
%span.clip.clipboard{:onclick => "cpyUrl(this)", ':data-clipboard-text' => "user.url"}
```

```JavaScriptInHaml
:javascript
  function cpyUrl(select) {
    var form;
    form = new Form;
    form.hideFieldset()
    clipboard = new Clipboard(select)
    clipboard.on('success', function(e) { // ここがクリック１回目だと動作しない
      return form.showTooltip($(e.trigger), 'copied!');
    });
    $('.clipboard').on('mouseleave', function() {
      $(this).attr('class', 'clip clipboard');
      return $(this).removeAttr('aria-label');
    });
    form.updateChildrenSelectOptions($('.select-parent'))
  }
```
もし何かお分かりの方、いらっしゃいましたら教えて頂けますと幸いです。
よろしくお願いいたします。

【JS】クリック１回目のイベントだけ発生しない【Clipboard.js】

link_toを用いて、リンクパスを指定しました。
下記のようなコードになったのですが、
font awesomeを使用していて、font awesomeの下に下線ができました。
```
.tweets
  = link_to new_tweets_path do
    %i.fas.fa-pen
```
font awesomeのscssはこのようになっています。
```
.fa-pen {
  line-height: 90px;
  text-align: center;
  display: block;
  font-size: 30px;
  color: white;
  text-decoration: none;
}
```
```
text-decoration: none;
```
これを当ててみても下線は消えません。
一体、何が原因でしょうか？
ご回答お願い致します。