How to get contents of invalid form model in AngularJS?

I have an AngularJS web app that has a form containing a textarea as follows:

<textarea required ng-maxlength="1000" ng-model="foo"></textarea>

The validation logic simply says that the user must enter a value up to a maximum of 1000 characters. Suppose further that I decide that I want the app to show the user how many characters remain before the limit is reached. No problem: I simply write this:

<div ng-if="foo.length <= 1000">
    {{ 1000 - foo.length }} characters remaining
</div>

The above works perfectly. Now, suppose that I want to display a message indicating that the user has typed too many characters, so I write the following:

<div ng-if="foo.length > 1000">
    {{ foo.length - 1000 }} characters too many
</div>

The above code does not work and it appears that such is the case because the input value is not accepted by Angular, so foo is left undefined, and I can't tell the user how many characters must be removed for the input to be valid.

Therefore, I would like to know if there is a way to get the value of an invalid input and tell the user a meaningful reason that it is invalid.

You can use the $viewValue of the NgModelController https://code.angularjs.org/1.3.10/docs/api/ng/type/ngModel.NgModelController

To access it, you would need to add a name to both the form and the input.

<form name="someForm">
  ...
  <textarea required ng-maxlength="1000" ng-model="foo" name="lotsaText"></textarea>
  ...
  <div ng-if="someForm.lotsaText.$viewValue.length > 1000">
    {{ someForm.lotsaText.$viewValue.length - 1000 }} characters too many
  </div>
</form>

See the sample code snippet below to see how it works where I also incorporated kappaismyname's suggestions

(function(){
  "use strict";
  
  var app = angular.module('fooApp', []);
  
  app.controller('MainCtrl', function($scope) {
    $scope.model = {foo:"Default text here"};
  });
  
})();

textarea.ng-invalid {
  border: 2px solid red;
}
.validation-message {
  color: red;
}

<!DOCTYPE html>
<html ng-app="fooApp">

  <head>
    <meta charset="utf-8" />
    <script src="https://code.angularjs.org/1.3.17/angular.js" ></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>model.foo: {{model.foo | json}}</p>
    <form name="someForm">
      Enter text, but  not too much:<br>
      <textarea required ng-maxlength="25" ng-model="model.foo" name="lotsaText"></textarea>
    
      <div ng-if="someForm.lotsaText.$error.maxlength" class="validation-message">
        {{ someForm.lotsaText.$viewValue.length - 25 }} characters too many
      </div>
      <div ng-if="someForm.lotsaText.$error.required" class="validation-message">
        A non-empty value is required
      </div>
    </form>
  </body>

</html>

Recommended topics

Hot tags