Rails edit form not working properly with angular

Question

I am using angular client side form validation in my rails form. But if I use angular model in any input field then the fields looks empty and not prefilling with the current database data as normal.

Here is an input element with angular error validation. This field is not getting pre-populated with the listing_name data which is already in the database

<div class="col-md-12">
  <div class="form-group">
    <%= f.label :listing_name %><br/>
    <%= f.text_field :listing_name, placeholder: "Make it short and catchy", "ng-model" => "editRoom.listing_name", "ng-required": true, "ng-minlength": 2, class: "form-control input-lg" %>
  </div>
  <p class="error validation-error" ng-show="editRoom['room[listing_name]'].$invalid && editRoom['room[listing_name]'].$touched">
    This field is required
  </p>
</div>

But if I remove the ng-model from the input field it works as expected.I dont have any controller or anything for angular. The form is just a normal rails form and am only using angular for form validation. How can I fix this in this scenario?

Update

I added ng-app="editForm" and it worked first without even declaring the module and it now fails after a server restart and asking for module. SO I created a module but now the console error is gone but the form is again not prefilling with form data.seems like a glitch.. any help

I am using "angular": "~1.4.8" via bower

gnerkus · Accepted Answer · 2016-01-19 17:52:50Z

1

You'll need to add an ng-app directive somewhere in the document.

<body ng-app='someApp'>
  <!-- Other elements -->
  <div class="col-md-12">
  <!-- Other elements -->
</body>

answered Jan 19, 2016 at 17:52

gnerkus

12.2k7 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhilash Over a year ago

actually added ng-app but didnt gave a name. But If I gave a name it works. Thank you.

Collectives™ on Stack Overflow

Rails edit form not working properly with angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related