我在我的项目中使用 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>

这是我处理表单行为的 Controller :

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 工作完美。真正分配给表单元素的错误文本。但它在提交表单后不显示。如果有人知道如何修复它 - 非常感谢您的回复。

最佳答案

我遇到了类似的问题，直到我明白(实际上阅读了文档)字段的验证应该通过 onbeforesave 进行管理。如果您想为一个或多个元素定义验证(我就是这种情况)，您可以通过在 editable-* 元素上使用 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，请不要忘记返回拒绝，否则 表格将关闭。

关于javascript - Angular x-editable setError 不显示验证错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25358693/