0

我刚刚使用以下代码以我想要的方式进行验证：

<div class="control-group" ng-class="{ error : (submitted || accountForm.name.$dirty) && accountForm.name.$invalid }">
   <label for="name" class="control-label">Company Name:</label>
   <input type="text" name="name" ng-model="account.name" ng-maxlength="50" required />
   <span class="help-inline" ng-show="(submitted || accountForm.name.$dirty) && accountForm.name.$error.maxlength">Name too long</span>
   <span class="help-inline" ng-show="(submitted || accountForm.name.$dirty) && accountForm.name.$error.required">Required</span>
</div>

但似乎有很多类似的代码，只有细微的差别。简化它以使其a）更清晰，b）更易于维护的最佳方法是什么？

23/07 更新似乎没有立即的最佳实践。

4

2 回答 2

0

您可以在$scope控制该模板的控制器中创建一个错误变量。像这样的东西：

html

<div ng-controller="FormCtrl" class="control-group" ng-class="{ error : (submitted || accountForm.name.$dirty) && accountForm.name.$invalid }">
   <label for="name" class="control-label">Company Name:</label>
   <input type="text" name="name" ng-model="account.name" ng-maxlength="50" required />
   <input type="button" ng-click="submitForm()" />
   <span class="help-inline">{{ error }}</span>
</div>

控制器

window.FormCtrl = function ($scope) {
    $scope.error = "";

    $scope.submitForm = function() {
        if ($scope.accountForm.name.length > 50) {
            $scope.error = "Name too long";
        }
        else if ($scope.accountForm.name == null || $scope.accountForm.name == undefined) {
            $scope.error = "Name required";
        }
        else {
            $scope.error = "";
            //submit logic
        }
    }
}
于 2013-07-22T17:55:58.563 回答
0

由于您想为其他表单字段重用相同的代码，并且每个表单字段的验证逻辑似乎都相似，所以我找不到任何有助于重用代码的ngForm 。相反，我会建议一种不同的方法，您不使用 ngForm 并自己在 js 中进行验证。这样，您可以在任何地方重用该方法。

这是 jsFiddle 的链接：http: //jsfiddle.net/rCDg8/1/

<div ng-app>
    <div ng-controller="DemoCtrl">
        <form name="accountForm" ng-submit="submit()">
            <div class="control-group" ng-class="class">
                <label for="name" class="control-label">Company Name:</label>
                <input type="text" name="name" ng-model="account.name" ng-change="validateEntry(account.name)" required></input> 
                <span class="help-inline" ng-show="accountForm.$dirty||accountForm.$invalid">{{msg}}</span>
            </div>
        </form>
    </div>
</div>

控制器：

function DemoCtrl($scope) {

    var longName = 'Name too long';
    var nameRequired = 'Name is required!';
    $scope.class = '';
    $scope.showMsg = false;
    $scope.validateEntry = function (validateItem) {
        if (angular.isDefined(validateItem)) {
            if (validateItem.length > 50) {
                showErrorMsg(longName);
            } else if (validateItem.length === 0) {
                showErrorMsg(nameRequired);
            } else {
                $scope.class = '';
                $scope.showMsg = false;
                $scope.accountForm.$dirty = false;
                $scope.accountForm.$pristine = true;
            }
        } else {
            showErrorMsg(nameRequired);
        }
    };

    $scope.submit = function(){
        alert('IS Form Dirty: '+$scope.accountForm.$dirty);
    };

    function showErrorMsg(msg) {
        $scope.class = 'error';
        $scope.showMsg = true;
        $scope.msg = msg;
        $scope.accountForm.$dirty = true;
    }
};
于 2013-07-23T06:07:18.830 回答