Angular x-editable setError 不显示验证错误

Question

我在我的项目中使用 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 完美无缺。真正分配给表单元素的错误文本。但提交表单后不显示。如果有人知道如何解决它 - 非常感谢您的回复。

Answer 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，请不要忘记返回拒绝，否则 表单将关闭。

Answer 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 的直接访问。解决方案很糟糕，因为您必须手动查看元素的索引，并且任何表单更改都会导致修复元素索引。

Answer 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 防止表单关闭..) 希望，它可以帮助某人。

干杯！