CODEWITHSUNDEEP
ruby-on-railsangularjsvalidation
SoWhat
SoWhat

Reputation: 5622

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

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"
          | ×
        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

Upvotes: 3

Views: 284

Answers (2)

Colo Ghidini
Colo Ghidini

Reputation: 723

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">

Upvotes: 0

V&#237;ťa Plšek - angular.cz
V&#237;ťa Plšek - angular.cz

Reputation: 1503

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;

Upvotes: 4

Related Questions