Showing validation errors doesn't work in angular| $errors object empty

Question

I have the following form (in rails)

= form_for([@debate,@argument], html: { class: "form-horizontal", role: "form" , "ng-submit"=>"addArgument('support',$event)", novalidate: true, name: "argumentformsupport"}) do |f|
  - if @argument.errors.any?
    .alert.alert-danger.alert-dismissable role="alert"
      button.close type="button" data-dismiss="alert"
        span aria-hidden="true"
          | &times;
        span.sr-only
          | Close
      h4= "#{pluralize(@argument.errors.count,"error")} prohibited this argument from being saved:"
      ul
        - @argument.errors.full_messages.each do |msg|
          li= msg
  = f.hidden_field :side, :value=>side, "ng-model"=>"argument['support'].side"

  .form-group

    .col-sm-12
      = f.text_area :content, class: "form-control", "ng-model"=>"argument['support'].content", required: true, "ng-minlength"=>"100", "ng-maxlength"=>"4000"
      textarea.form-control ng-model="argument['support'].content" name="content" required=true ng-minlength="100" ng-maxlength=4000
      <div ng-messages="argumentformsupport.content.$error" style="color:maroon" role="alert">
        <div ng-message="required">Please type the argument</div>
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
      </div>

  .form-group
    .col-sm-4
      = f.submit class: "btn btn-success"
    .col-sm-3
      button.btn.btn-danger type="button" ng-click="debcon.toggleArgumentForm('support')" Cancel

The following is my app js code

var debateApp=angular.module("debate",['ng-rails-csrf', 'yaru22.angular-timeago'])

debateApp.controller("DebateController",["$scope","$http",function($scope,$http){
....
}

The ng-messages thing doesn't work at all. all the messages are visible. I added the angular-messages dependancy, but all the messages are still visible.

I also checked argumentformsupport.content.$errors object. Its empty

Where did you add the dependency? It's missing in your example. Could you setup a plunker to demonstrate the problem so we can debug it? — Jesse Buitenhuis
– Jesse Buitenhuis, Commented Oct 28, 2015 at 17:23

Víťa Plšek - angular.cz · Accepted Answer · 2015-10-30 11:21:11Z

4

+100

Your main module is missing ngMessages dependency. Should look something like that:

angular.module("debate",['ngMessages', 'ng-rails-csrf', 'yaru22.angular-timeago'])

Of course you also need to include proper javascript file.

See: https://docs.angularjs.org/api/ngMessages;

answered Oct 30, 2015 at 11:21

Víťa Plšek - angular.cz

1,5031 gold badge10 silver badges26 bronze badges

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

Comments

Colo Ghidini · Accepted Answer · 2015-11-03 14:46:45Z

0

First, did you add ngMessages in your module dependencies array?

angular.module("debate",['ngMessages', 'ng-rails-csrf', 'yaru22.angular-timeago'])

Second, I recommend you tu use $dirty (to check if the user has already interacted with the form) in your ng-messages div. It looks like:

      <div ng-messages="argumentformsupport.content.$error" ng-show="argumentformsupport.content.$dirty" style="color:maroon" role="alert">

answered Nov 3, 2015 at 14:46

Colo Ghidini

7239 silver badges21 bronze badges

1 Comment

SoWhat Over a year ago

Done both. Doesn't help

Collectives™ on Stack Overflow

Showing validation errors doesn't work in angular| $errors object empty

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related