javascript - Angular x-editable setError not displaying validation errors -
i using angular x-editable in project. http://vitalets.github.io/angular-xeditable/#editable-row
anything works fine except of validation error displaying. here html template:
<table class="table"> <thead> <tr> <th>name</th> <th>width</th> <th>length</th> <th>sheets quantity</th> <th>low price</th> <th>high price</th> <th>currency</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="material in sheetmaterials"> <td> <span editable-text="material.name" e-name="name" e-form="form" e-required> {{ material.name }} </span> </td> <td> <span editable-text="material.width" e-name="width" e-form="form" e-required> {{ material.width }} </span> </td> <td> <span editable-text="material.length" e-name="length" e-form="form" e-required> {{ material.length }} </span> </td> <td> <span editable-text="material.sheets" e-name="sheets" e-form="form" e-required> {{ material.sheets }} </span> </td> <td> <span editable-text="material.pricelow" e-name="pricelow" e-form="form" e-required> {{ material.pricelow }} </span> </td> <td> <span editable-text="material.pricehigh" e-name="pricehigh" e-form="form" e-required> {{ material.pricehigh }} </span> </td> <td> <span editable-select="material.currency" e-ng-options="s.value s.text s in currencies" e-name="currency" e-form="form" e-required> {{ showcurrency( material ) }} </span> </td> <td style="white-space: nowrap"> <form editable-form name="form" onaftersave="updatesheetmaterial( $data, material._id, form )" ng-show="form.$visible" class="form-buttons form-inline" shown="inserted == material"> <button type="submit" ng-disabled="form.$waiting" class="btn btn-primary"> save </button> <button type="button" ng-disabled="form.$waiting" ng-click="form.$cancel()" class="btn btn-default"> cancel </button> </form> <div class="buttons" ng-show="!form.$visible"> <button class="btn btn-primary" ng-click="form.$show()"> edit </button> <button class="btn btn-danger" ng-click="removesheetematerial( materials, $index )"> delete </button> </div> </td> </tr> </tbody> </table> <button class="pull-right btn btn-primary" ng-click="createsheetmaterial()">add</button> here controller handle form behaviour:
angular.module( 'client' ) .controller( 'materialcontroller', [ '$scope', '$filter', 'sheetmaterialfactory', function( $scope, $filter, sheetmaterialfactory ){ /** * index action * @return void */ $scope.index = function(){ $scope.currencies = [ { value: 'rub', text: "Р" }, { value: 'eur', text: "€" }, { value: 'usd', text: "$" }, ] sheetmaterialfactory.getlist().then( function( materials ){ $scope.sheetmaterials = materials; }); $scope.content = "partials/material.html"; } $scope.showcurrency = function( material ){ var selected = $filter('filter')( $scope.currencies, { value: material.currency }); return ( material.currency && selected.length ) ? selected[ 0 ].text : 'not set'; } /** * update sheet material * @param data – object of material options * @param _id – unique id of material * @return void */ $scope.updatesheetmaterial = function( data, _id, form ){ data._id = _id; var action = data._id ? "update" : "create"; sheetmaterialfactory [ action ]( data ) .then( function( sheetmaterial ){ if( "update" == action ){ var collection = $scope.sheetmaterials; collection = collectionservice.updateobject( collection, sheetmaterial ); } else { collection.push( sheetmaterial ); } }, function( error ){ if( error.data.errors ){ angular.foreach( error.data.errors, function( errordata, field ){ form.$seterror( field, errordata.message ); }); } else { form.$seterror( 'name', 'Неизвестная ошибка' ); } }); } /** * create sheet material * @return void */ $scope.createsheetmaterial = function( data ){ if( !data ){ var sheetmaterial = { name: "some name" }; $scope.sheetmaterials.push( sheetmaterial ); return; } } $scope.index(); } ] ); i've checked minor details , see form.$seterror works perfect. error text assigned form element. not displaying after form submitted. if knows how fix – reply appreciated.
i had similar problems, until understood (actually read docs) validation of fields should managed through onbeforesave. if want define validation 1 or more elements, case, can using onbeforesave on editable-* elements this:
// on template (using controller ctrl) <span editable-select="material.currency" e-ng-options="s.value s.text s in currencies" e-name="currency" e-form="form" onbeforesave="ctrl.validatenotempty($data)" e-required> {{ showcurrency( material ) }} </span> // on controller vm.validatenotempty(val) { if (!val) { return "this required field"; } } the validation method called , if returns string, form remain open , errors displayed expected.
-- update --
the above apply error-handling prior sending request. if validation must done server-side, usage of $seterror of course right way go. added validation form this, , worked perfectly:
// on controller vm.updatemethod = function() { return myhttpupdatemethod(foo) .catch(function(errors) { // extract field , error_msg $scope.form.$seterror(field, error_msg); // important, we're catching error reject // promise here, stop form closing. return $q.reject(errors); }); } here nice jsfiddle found: http://jsfiddle.net/nfpch/81/
but had use catch instead of error in special case. if use catch don't forget return reject, or else form close.
Comments
Post a Comment