logo
down
shadow

Why does ng-messages for form validation not work when using $rollbackViewValue


Why does ng-messages for form validation not work when using $rollbackViewValue

By : VRCore
Date : November 15 2020, 06:54 AM
I wish did fix the issue. You would need to make the form pristine and revert back the touched state as well. You can do so by calling the special functions, $setPristine() and $setUntouched() , on the formController. But it appears rollBackViewValue works with ngSubmit, but it is only to revertback during some action, (like esc key, another button). But if the form field has contraint errors it appears it updated viewvalue to nullify the entered value. You could try this way by resetting to default field values.
In your view:-
code :
 <button type="button" class="btn btn-default" 
     data-ng-click="vm.reset(form)">reset</button>
 var vm = this;
  var defModel = {
    fname: "Albert",
    lname: "Capone"
  };

  vm.names = angular.copy(defModel);

  vm.reset = function(form) {
    form.$rollbackViewValue();
    form.$setPristine(); //Set pristine state
    form.$setUntouched(); //Set state from touched to untouched
    vm.names = angular.copy(defModel); //reset model
  }
var App = angular.module("App", ['App', 'ngMessages']);
App.controller('formCrtl', function($scope, $rootScope) {

  var vm = this;
  var defModel = {
    fname: "Albert",
    lname: "Capone"
  };

  vm.names = angular.copy(defModel);


  vm.reset = function(form) {
    form.$rollbackViewValue(); //Probably can be removed
    form.$setPristine();
    form.$setUntouched();
   
    vm.names = angular.copy(defModel);
     
  }
});
<div data-ng-app="App">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

  <div class="container" data-ng-controller="formCrtl as vm">
    <div class="col-lg-5">
      <form name="form" novalidate="novalidate" role="form" data-ng-submit="vm.submit(form)" data-ng-model-options="{updateOn: 'submit'}">
        <!---->
        <div class="form-group" data-ng-class="{ 'has-error': form.fname.$invalid && form.fname.$touched }">
          <label for="fname">First Name</label>
          <input type="text" required class="form-control" name="fname" id="fname" placeholder="Enter text" data-ng-model="vm.names.fname">
          <div data-ng-if="form.fname.$touched" data-ng-messages="form.fname.$error">
            <span class="help-block" data-ng-message="required">required field</span>
          </div>
        </div>
        <div class="form-group" data-ng-class="{ 'has-error': form.lname.$invalid && form.lname.$touched }">
          <label for="lname">Last Name</label>
          <input type="text" required class="form-control" name="lname" id="lname" placeholder="Enter text" data-ng-model="vm.names.lname">
          <div data-ng-if="form.lname.$touched" data-ng-messages="form.lname.$error">
            <span class="help-block" data-ng-message="required">required field</span>
          </div>
        </div>
        <div class="col-sm-offset-2 col-sm-10 btn-group">
          <button type="submit" class="btn btn-primary" data-ng-disabled="form.$invalid">Submit</button>
          <button type="button" class="btn btn-default" data-ng-click="vm.reset(form)">reset</button>
          <!---->
        </div>
      </form>
    </div>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
</div>


Share : facebook icon twitter icon
jquery form validation with two validation messages

jquery form validation with two validation messages


By : TheClayFox
Date : March 29 2020, 07:55 AM
it fixes the issue You can add many rules at once.
As far as resetting the form, there is a method for this built into Javascript:
code :
$('#myform')[0].reset();
Form Validation Messages in ASP.NET MVC2 - using images instead of text for error messages

Form Validation Messages in ASP.NET MVC2 - using images instead of text for error messages


By : MaZ
Date : March 29 2020, 07:55 AM
I hope this helps you . You should beable to achieve this by creating your own HtmlHelper extension method.
E.g.
code :
public static string ValidationImage(this HtmlHelper htmlHelper, string modelName)
{
    if (modelName == null)
    {
        throw new ArgumentNullException("modelName");
    }

    if (!htmlHelper.ViewData.ModelState.ContainsKey(modelName))
    {
        return null;
    }

    ModelState modelState = htmlHelper.ViewData.ModelState[modelName];
    ModelErrorCollection modelErrors = (modelState == null) ? null : modelState.Errors;
    ModelError modelError = ((modelErrors == null) || (modelErrors.Count == 0)) ? null : modelErrors[0];

    if (modelError == null)
    {
        return null;
    }

    string messageText = GetUserErrorMessageOrDefault(htmlHelper.ViewContext.HttpContext, modelError, modelState);

    TagBuilder builder = new TagBuilder("img");
    builder.MergeAttribute("src", "urlToYourCrossImage");
    builder.MergeAttribute("class", HtmlHelper.ValidationMessageCssClassName); //Or your own custom class for the img tag here
    builder.MergeAttribute("alt", messageText);
    builder.MergeAttribute("title", messageText);

    return builder.ToString(TagRenderMode.SelfClosing);
}
Form Validation Messages (using jQuery Validation Plugin)

Form Validation Messages (using jQuery Validation Plugin)


By : user3237267
Date : March 29 2020, 07:55 AM
To fix this issue Yes, this is possible. It currently behaves this way since you have defined only one custom message for the cadDocDate field. So regardless what validation is called, the single message you have defined will be returned. To correct this, you should define the custom messages for the specific validation type. For example,
code :
messages: {
         fileType: "File Type is a required field.",
         fileSubType: "Sub Type is a required field.",
         fileTitle: "Title is a required field.",
         cadDocDate: {
              required: "Document Date is a required field."
         }
}
Show validation message when form is submitted or field is dirty - Both validation messages custom and default shown whe

Show validation message when form is submitted or field is dirty - Both validation messages custom and default shown whe


By : JazzSinatra
Date : March 29 2020, 07:55 AM
will be helpful for those in need To prevent default validation, try adding the novalidate attribute to your form:
code :
<form class="form-horizontal name="newEventForm" novalidate>`
<div ng-show="newEventForm.$submitted || newEventForm.Name.$dirty" ng-messages="newEventForm.Name.$error" style="color: maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
   <div ng-message="maxlength">Your field is too long</div>
</div>
$rollbackViewValue() - setting initial state of form - AngularJs

$rollbackViewValue() - setting initial state of form - AngularJs


By : Sholla 2015
Date : March 29 2020, 07:55 AM
this one helps. The form form1 isn't a defined variable in your controller. You have to use $scope.form1.$...
But be aware that $rollbackViewValue might not do what you expect. It would be easier to set the state you want your form to be in manually.
Related Posts Related Posts :
  • what can or cannot be done with a controller created in a module Vs controller created globally?
  • Angularjs - add ng-* attributes using directives
  • Why are my Angular, absolute path, URL's not compiling properly with Closure Compiler?
  • AngularJS routing not working properly in PhoneGap
  • AngularJS: Create new scope variable name using a variable value
  • Directive scope update does not update controller scope (AngularJs)
  • Unit-test a angular controller function in a directive
  • jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive
  • AngularJS determine filter in controller
  • How to deploy an app using ionic framework to Amazon? (elastic beanstalk prefered)
  • Conditional injection of a service in AngularJS
  • Filtering on object properties not working
  • Open $modal from the service and pass variables to the controller
  • ngClick evaluated against scope instead of isolateScope
  • onEnter and onExit are not called when state is left/activated in angularjs ui router
  • Shared client & server modules with angularjs and pongular
  • Getting the angular app to run when using protractor
  • Angularjs: create a link for download different types of file
  • AngularJS: On Change of Parent DropDown Option Also Changes the Dependant Drop Down Options Associated with Other Parent
  • Angular HTML5 mode, Wordpress, Rewrites, Apache and You
  • Using angular js form validations in <form:input> tag
  • AngularJS call common functions in a directive template
  • AngularJS Promise resolved incorrectly
  • properly clearing whole AngularJS ui-grid chart
  • Can not figure out how to store $rootScope in angular.bootstrap
  • animate.css animation within angularjs 1.3 using ngAnimate gives different animations in Firefox
  • Auth0 IE Issue: Unable to get property 'frames' of undefined or null reference
  • Am I misusing directives with too much logic?
  • Use an Angular JS value as a parameter of TWIG "path" function in Symfony 2
  • multiple function on ng-click angularjs
  • Converting $.ajax call to $http call in angular 404 error
  • Angularjs templateUrl file location not found
  • How to execute the function after change page in angularjs?
  • Pass variable to AngularJS directive without isolated scope
  • OAuth, Custom Login, or Both
  • Angular Directive: Isolate Scope & Transclude is true, but HTML in the directive needs to continue to bind to parent
  • Compare objects in angularjs
  • Combine "Checkbox" & "Avatar" in an Ionic Framework List
  • Issue with the Angular UI router when inheriting from a parent state
  • Is there a way to initialize an Angular Service without DI into controller
  • Why is a parent controller's $scope not accessible from a (child) directive?
  • How to get back button in Ion-tabs page
  • AngularJS bind class attribute to model
  • How can I get AngularJS ui-router to respond correctly to a browser page refresh?
  • Angular validation does not work
  • Breez Create Complex Entities
  • Drag and drop using protractor in dthmlx component
  • In Angular JS, what is the default 'cache' value that is used when sending request with $http service?
  • How to change placeholder for single textbox in angular?
  • $ is not defined - jquery angular mixing
  • CORS issue angularjs and spring security
  • Angularjs cannot select last item in dropdown the first time
  • Angularjs - $watch issue
  • On change radio button to no the span should hide in angular
  • Creating a wordcloud generator in Angularjs
  • Angular UI Bootstrap collapse - whats wrong?
  • AngularJS after redirect from app to app, the default page is not loading
  • Why does my scope update my factory and my factory update my scope when it should not?
  • AngularJS testing $httpBackend.whenGET().respond() not working with number as parameter
  • Setting up Login in Angular App
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org