javascript - Client side and server side error message display for AngularJs Form -


i need display different messages client side validation error such required message (this field required) , server side error message comes backend such (entered password incorrect).

what doing - in mycontroller.js : setting $scope.message = "this field required";when user not give value , try submit, above error getting displayed.

but once gives value goes server check whether valid , server returns error message i.e entered password incorrect response if not valid.

so if set response value $scope.message, overrides previous value , displays correctly, issue once again if user tries submit blank value overridden error message getting displayed. here should display required message i.e. this field required.

how implement it?

you can create custom angular directive validates password on server. if error, add error in $validators pipeline.

example: create directive check username availability

ngmodule.directive('usernameavailablevalidator', ['$http', function($http) {   return {     require : 'ngmodel',     link : function($scope, element, attrs, ngmodel) {       ngmodel.$asyncvalidators.usernameavailable = function(username) {         return $http.get('/api/username-exists?u='+ username);       };     }   } }]) 

html:

<form name="myform"> <!--    first required, pattern , minlength validators executed   , asynchronous username validator triggered... --> <input type="text"        class="input"        name="username"        minlength="4"        maxlength="15"        ng-model="form.data.username"        pattern="^[-\w]+$"        username-available-validator        placeholder="choose username yourself"        required /> <div ng-if="myform.colorcode.$error.usernameavailable">error message here!</div> </form> 

Comments