Geek Answers Handbook

Show user error ngMessage

In this panel, the task is to display an error message based on a check in the controller (instead of the built-in required or min-length ). A message error is not displayed when ng-message-exp is set. Any ideas how to make this work?

HTML

 <body ng-app="ngMessagesExample" ng-controller="ctl"> <form name="myForm" novalidate ng-submit="submitForm(myForm)"> <label> This field is only valid when 'aaa' is entered <input type="text" ng-model="data.field1" name="field1" /> </label> <div ng-messages="myForm.field1.$error" style="color:red"> <div ng-message-exp="validationError">this is the error</div> </div> <br/><br/> <button style="float:left" type="submit">Submit</button> </form>

Javascript

 var app = angular.module('ngMessagesExample', ['ngMessages']); app.controller('ctl', function ($scope) { $scope.submitForm = function(form) { if (form.field1.$modelValue != 'aaa') { $scope.validationError = true; console.log('show error'); } else { $scope.validationError = false; console.log('don\'t show error'); } }; });
+8
angularjs
source share
3 answers

Your main argument to ng-messages bound to myForm.field1.$error , but you never add an error to form.field1.$error . So in your controller, just set the $error object:

 if ($scope.data.field1 != 'aaa') { form.field1.$error.validationError = true; } else { form.field1.$error.validationError = false; }

Then you can simply execute the ng-message directive. Child elements that provide ng-message are already evaluated as properties of their parent ng-messages (note the extra s ). Typically, this is used with the parent that is the object of the $error element of the element, and the internal children are properties such as $error.required or, in your case, $error.validationError . No need for ng-message-exp here:

 <div ng-messages="myForm.field1.$error" style="color:red"> <div ng-message="validationError">this is the error</div> </div>

Fixed plunker

+19
source share

A better way to do this in the controller is to use $ setValidity

 if(a !== b){ form.inputName.$setValidity('custom-err', false); } else { form.inputName.$setValidity('custom-err', true); } form.$setSubmitted();
+17
source share

Dmitry K answers this perfectly.

I am going to expand the answer.

 //Function before show your form: vm.showForm(form){ form.$setPristine(); form.$setUntouched(); form.myFieldName.$setValidity('myCustomValidationName', false); //More code... } //funtion to validate field on "ng-change" vm.validateField(form){ if(xxxx == yyy) //Make your own validation{ form.myFieldName.$setValidity('myCustomValidationName', true); }else{ form.myFieldName.$setValidity('myCustomValidationName', false); } }

And the corresponding HTML code:

 <form name="myFormName" novalidate> <md-input-container class="md-block"> <label>myField</label> <input ng-model="ctrl.myFieldName" name="myFieldName" ng-change="ctrl.validateField(myFormName)" /> <div ng-show="myFormName.myFieldName.$touched || myFormName.$submitted"> <div ng-messages="myFormName.myFieldName.$error"> <div ng-message="myCustomValidationName">this is the message to show</div> </div> </div> </md-input-container> </form>
+6
source share

More articles:


All Articles