Angular x-editable setError 不显示验证错误
Posted
技术标签:
【中文标题】Angular x-editable setError 不显示验证错误【英文标题】：Angular x-editable setError not displaying validation errors 【发布时间】：2014-10-11 02:15:42 【问题描述】：我在我的项目中使用 angular x-editable。 http://vitalets.github.io/angular-xeditable/#editable-row
除了显示验证错误外，其他一切正常。 这是我的 html 模板：
<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 as s.text for 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>
这是我处理表单行为的控制器：
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();
]
);
我检查了所有的小细节，发现 form.$setError 完美无缺。真正分配给表单元素的错误文本。但提交表单后不显示。如果有人知道如何解决它 - 非常感谢您的回复。
【问题讨论】：
【参考方案1】：我有类似的问题，直到我明白（实际上阅读文档）字段验证应该通过onbeforesave 管理。如果您想为一个或多个元素定义验证，这就是我的情况，您可以通过在可编辑的元素上使用 onbeforesave 来实现，如下所示：
// on template (using controller as ctrl)
<span editable-select="material.currency"
e-ng-options="s.value as s.text for 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 is a required field";
将调用验证方法，如果它返回一个字符串，则表单将保持打开状态，错误将按预期显示。
-- 更新--
以上内容适用于发送请求之前的错误处理。如果验证必须在服务器端完成，那么$setError 的使用当然是正确的方法。我刚刚向这样的表单添加了验证，并且效果很好：
// on controller
vm.updateMethod = function()
return myHttpUpdateMethod(foo)
.catch(function(errors)
// Extract field and error_msg
$scope.form.$setError(field, error_msg);
// very important, as we're catching the error reject the
// promise here, to stop the form from closing.
return $q.reject(errors);
);
这是我发现的一个不错的 jsFiddle：http://jsfiddle.net/NfPcH/81/
但在我的特殊情况下，我必须使用 catch 而不是 error。如果您还使用catch，请不要忘记返回拒绝，否则
表单将关闭。
【讨论】：
【参考方案2】：好吧，看来我找到了一个糟糕的解决方案。不是最好的，但它有效。任何显示的表单元素都应该这样输入：
<span editable-text="material.name" e-name="name" e-form="form" e-required>
material.name || form.$editables[ 0 ].error
</span>
form.$editables[ 0 ].error - 是对 form 元素数组中元素编号 0 的 errorText 的直接访问。解决方案很糟糕，因为您必须手动查看元素的索引，并且任何表单更改都会导致修复元素索引。
【讨论】：
嘿，你找到更好的解决方案了吗？【参考方案3】：我也遇到了同样的问题..
错误未显示，因为表单关闭..
我的解决方案是使用form.$setError(name, msg) AND throw ('Error')
所以你应该改变这个
if( error.data.errors )
angular.forEach( error.data.errors, function( errorData, field )
form.$setError( field, errorData.message );
);
else
form.$setError( 'name', 'Неизвестная ошибка' );
到这里
if( error.data.errors )
angular.forEach( error.data.errors, function( errorData, field )
form.$setError( field, errorData.message );
);
else
form.$setError( 'name', 'Неизвестная ошибка' );
throw ('Error occurred!');
使用throw 防止表单关闭..)
希望，它可以帮助某人。
干杯！
【讨论】：
我在处理 x-editable 插件的错误时搞砸了，你让我很开心。 “form.$setError('name', 'Неизвестная ошибка');”帮我添加验证 @BasitMunir 很高兴我的解决方案对您有用^^以上是关于Angular x-editable setError 不显示验证错误的主要内容，如果未能解决你的问题，请参考以下文章
x-editable (twitter bootstrap)：如何更改空值？