cocoonを使ったフォーム入力のエラーを解消したい

Question

前提・実現したいこと

gemのcocoonを使って１つのフォームから複数のモデルに保存したい。

現在、投稿機能を持ったアプリケーションを開発しています。
ひとつのフォームから複数のモデルに保存する。
動的にフォームを追加・削除をしたい。
この２つからgemのcocoonを使用することにしましたが、、うまく機能せず困っています。
お力をお借りしたいです。
初めて質問をするので、至らないことが多いと思いますが、よろしくお願いします。

実現したいこと
page のnew.html.erbのフォームから
pageのpage_titleとpage_commentを
spotのspot_name,spot_address,spot_tel,spot_parking(radio_button),spot_commentを保存し、
spotの部分は動的にフォームの追加・削除ができるようにしたいです。

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

エラーメッセージ

NoMethodError in Pages#new
Showing projects/tyorippu2/app/views/pages/_page_spot_fields.html.erb where line #3 raised:

undefined method `text_field' for #<Spot:0x00007f8642f516b0>

該当のソースコード

ルーティング

app/config/routes.rb

Rails.application.routes.draw do
  devise_for :users
  root to: 'pages#index'
  resources :pages do
    resources :spots
  end
end

モデル

app/models/page.rb

class Page < ApplicationRecord
  belongs_to :user
  has_many :spots, dependent: :destroy, inverse_of: :page
  accepts_nested_attributes_for :spots, allow_destroy: true, reject_if: :all_blank

  validates :page_title, presence: true
end

app/models/spot.rb

class Spot < ApplicationRecord
  belongs_to :page

  validates :spot_name, presence: true
  validates :spot_address, presence: true
end

コントローラー

app/controllers/pages_controller.rb

class PagesController < ApplicationController

  def index
    @pages = Page.all
  end

  def new
    @page = Page.new
    @spot = @page.spots.build
  end

  def create
    @page = Page.new(page_params)
    if @page.save
      redirect_to root_path
    else
      render :new
    end
  end


  private
  
  def page_params
    params.require(:page).permit(:pege_title, :page_comment, 
       spot_attributes:[:id, :spot_name, :spot_address, :spot_tel, :spot_parking, :spot_comment, :_destroy, :page_id]).merge(user_id: current_user.id)
  end
end

ビュー

app/views/pages/new.html.erb

<%= render "shared/second-header" %>

<%= form_with(model: @page, local: true ) do |f| %>
  <%# pageテーブル保存したい %>
  <div class="field">
    <%= f.text_field :page_title, class:"input-default", id:"page-name", placeholder:"ページタイトルは？", maxlength:"40" %>
  </div>
  <div class="field">
    <%= f.text_field :page_comment, class:"input-default", id:"page-comment", placeholder:"どんなコースかひとことでどうぞ！", maxlength:"40" %>
  </div>
<%# ページのメイン部分 %>
  <div class='spot-form'>
    <h1 class='info-input-headline'>
      コース
    </h1>

    <%# spotテーブル %>
    <div id="spots">
      <%= f.fields_for :spots do |spot| %>
        <%= render 'pages/page_spot_fields', f: spot %>

        <div class="addNewSpot" id="addNewSpot">
          <%= link_to_add_association "add spot", f, :spots,
            class:"btn btn-default",
            data: {
              association_insertion_node: '#detail-association-insertion-point',
              association_insertion_method: 'after'
            }
          %>
        </div>
      <% end %>
    </div>
    <%# spotテーブル %>
  


    <%# 送信ボタン %>
  <%= f.submit "作成する" %>
<% end %>
    <%# 送信ボタン %>

app/views/pages/_page_spot_fields.html.erb

<div class="nested-fields">
  <div class="field">
　　　　　　　　　⇩この部分がエラーになってしまいます。
    <%= @spot.text_field :spot_name, class:"input-default", id:"spot-name", placeholder:"場所の名前" %>
  </div>
  <div class="field">
    <%= @spot.text_area :spot_address, class:"input-default", id:"spot-address", placeholder:"住所（都道府県は絶対に入力してください）" %>
  </div>
  <div class="field">
    <%= @spot.text_field :spot_tel, class:"input-default", id:"spot-tel", placeholder:"電話番号" %>
  </div>
  <div class="field">
    <%= @spot.label :spot_parking, "駐車場：" %>
    <%= @spot.radio_button :spot_parking, "あり" %>あり
    <%= @spot.radio_button :spot_parking, "なし" %>なし
    <%= @spot.radio_button :spot_parking, "近隣に有料あり" %>近隣に有料あり
  </div>
  <div class="field">
    <%= @spot.text_field :spot_comment, class:"input-default", id:"spot-comment", placeholder:"あなたの感想をひとことどうぞ！" %>
  </div>
  <%= link_to_remove_association "remove spot", s %>
</div>

試したこと

いろんなサイトなどを見て、f.fields_forを@page.spotsなどに変更してみたりと色々試しました。
また、renderの部分を確認しましたが、わかりませんでした。

補足情報（FW/ツールのバージョンなど）

rails ver6.0.0
gem 'devise'
gem 'cocoon'
gem 'jquery-rails'

package.json

{
  "name": "tyorippu2",
  "private": true,
  "dependencies": {
    "@nathanvda/cocoon": "^1.2.14",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "jquery": "^3.6.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^4.1.0"
  }
}

Answer 1

パーシャルビューの page_spot_fields をレンダリングするとき、フォームオブジェクトを f という変数で渡しています。

      <%= f.fields_for :spots do |spot| %>
        <%= render 'pages/page_spot_fields', f: spot %>

ですので、パーシャル側でも f を使ってフォームを作る必要があります。

app/views/pages/_page_spot_fields.html.erb

-   <%= @spot.text_field ... %>
+   <%= f.text_field ... %>

-   <%= @spot.text_area ... %>
+   <%= f.text_area ... %>

-   <%= @spot.label ... %>
-   <%= @spot.radio_button ... %>
+   <%= f.label ... %>
+   <%= f.radio_button ... %>

Comments

[1030tm]

@shinoharatさま
回答ありがとうございました！！
修正したところ、エラー内容が変わり、その後無事に表示されました！！