ancestryカテゴリ機能導入

前提・実現したいこと

料理投稿アプリを制作中で、rails5.0にancestry3.0.7を導入してカテゴリ機能を実装しようとしています。
まずは記事投稿機能にカテゴリ機能を追加しようとしていますがうまくいきません。
なんとか親カテゴリを投稿ページに表示して選択できるところまでは行ったのですが、そこでもエラーが起き
修正しているうちにどんどんエラーが深くなって行っている気がします・・・。

発生している問題・エラーメッセージ

ArgumentError in Posts#new
First argument in form cannot contain nil or be empty

該当のソースコード

[new.html.haml]

.post-wrapper
  .post-wrapper__groups
    .post-wrapper__groups--text 投稿フォーム
    = form_for @post do |f|
      =f.text_field :title, class: "post-wrapper__groups--title", placeholder: " タイトルを入力してください(10文字以内）"
      =f.text_area :material, class: "post-wrapper__groups--materials", placeholder: " 材料を入力してください"
      =f.text_area :body, class: "post-wrapper__groups--recipe", placeholder: " レシピを入力してください"
      = f.file_field :image, class: "post-wrapper__groups--file"
      = f.submit '送信', class: 'post-wrapper__groups--submit' 
.listing-form-box
  .listing-product-detail__category
  = form_for @category_parent_array do |f|
    = f.label 'カテゴリー', class: 'listing-default__label'
    %span.listing-default--require 必須
    .listing-select-wrapper
      .listing-select-wrapper__box
        = f.select :category, @category_parent_array, {}, {class: 'listing-select-wrapper__box--select', id: 'parent_category'}
        %i.fas.fa-chevron-down.listing-select-wrapper__box--arrow-down

[post_controller.rb]

  def new
    @post = Post.new
    respond_to do |format|
      format.html
      format.json do
        @category_parent_array = ["---"]
        Category.where(ancestry: nil).each do |parent|
          @category_parent_array << parent.name
        end
      end
    end
  end

  def category_children  
    @category_children = Category.find_by(name: "#{params[:parent_name]}", ancestry: nil).children 
  end
 
  def category_grandchildren
    @category_grandchildren = Category.find("#{params[:child_id]}").children
  end

[category.js]

$(function(){
  // カテゴリーセレクトボックスのオプションを作成
  function appendOption(category){
    var html = `<option value="${category.name}" data-category="${category.id}">${category.name}</option>`;
    return html;
  }
  // 子カテゴリーの表示作成
  function appendChidrenBox(insertHTML){
    var childSelectHtml = '';
    childSelectHtml = `<div class='listing-select-wrapper__added' id= 'children_wrapper'>
                        <div class='listing-select-wrapper__box'>
                          <select class="listing-select-wrapper__box--select" id="child_category" name="category_id">
                            <option value="---" data-category="---">---</option>
                            ${insertHTML}
                          <select>
                          <i class='fas fa-chevron-down listing-select-wrapper__box--arrow-down'></i>
                        </div>
                      </div>`;
    $('.listing-product-detail__category').append(childSelectHtml);
  }
  // 孫カテゴリーの表示作成
  function appendGrandchidrenBox(insertHTML){
    var grandchildSelectHtml = '';
    grandchildSelectHtml = `<div class='listing-select-wrapper__added' id= 'grandchildren_wrapper'>
                              <div class='listing-select-wrapper__box'>
                                <select class="listing-select-wrapper__box--select" id="grandchild_category" name="category_id">
                                  <option value="---" data-category="---">---</option>
                                  ${insertHTML}
                                </select>
                                <i class='fas fa-chevron-down listing-select-wrapper__box--arrow-down'></i>
                              </div>
                            </div>`;
    $('.listing-product-detail__category').append(grandchildSelectHtml);
  }
  // 親カテゴリー選択後のイベント
  $('#parent_category').on('change', function(){
    var parentCategory = document.getElementById('parent_category').value; //選択された親カテゴリーの名前を取得
    if (parentCategory != "---"){ //親カテゴリーが初期値でないことを確認
      $.ajax({
        url: 'get_category_children',
        type: 'GET',
        data: { parent_name: parentCategory },
        dataType: 'json'
      })
      .done(function(children){
        $('#children_wrapper').remove(); //親が変更された時、子以下を削除するする
        $('#grandchildren_wrapper').remove();
        $('#size_wrapper').remove();
        $('#brand_wrapper').remove();
        var insertHTML = '';
        children.forEach(function(child){
          insertHTML += appendOption(child);
        });
        appendChidrenBox(insertHTML);
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#children_wrapper').remove(); //親カテゴリーが初期値になった時、子以下を削除するする
      $('#grandchildren_wrapper').remove();
      $('#size_wrapper').remove();
      $('#brand_wrapper').remove();
    }
  });
  // 子カテゴリー選択後のイベント
  $('.listing-product-detail__category').on('change', '#child_category', function(){
    var childId = $('#child_category option:selected').data('category'); //選択された子カテゴリーのidを取得
    if (childId != "---"){ //子カテゴリーが初期値でないことを確認
      $.ajax({
        url: 'get_category_grandchildren',
        type: 'GET',
        data: { child_id: childId },
        dataType: 'json'
      })
      .done(function(grandchildren){
        if (grandchildren.length != 0) {
          $('#grandchildren_wrapper').remove(); //子が変更された時、孫以下を削除するする
          $('#size_wrapper').remove();
          $('#brand_wrapper').remove();
          var insertHTML = '';
          grandchildren.forEach(function(grandchild){
            insertHTML += appendOption(grandchild);
          });
          appendGrandchidrenBox(insertHTML);
        }
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#grandchildren_wrapper').remove(); //子カテゴリーが初期値になった時、孫以下を削除する
      $('#size_wrapper').remove();
      $('#brand_wrapper').remove();
    }
  });
});

試したこと

postsコントローラのindexアクションに@category_parent_array = Category.newを定義してみると
今度はundefined method `categories_path'エラーが発生しました。
次から次にエラーが起きるのでゴールにたどり着ける気がしません・・・。
よろしくお願いします。