Question

我只是通过以下代码以我想要的方式运行验证：

<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 似乎没有立竿见影的最佳做法。

Answer 1

您可以在控制该模板的控制器的$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
        }
    }
}

Answer 2

由于您希望为其他表单字段重用相同的代码，并且每个表单的验证逻辑似乎相似，我找不到任何有助于重用代码的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;
    }
};

清理验证逻辑

2 个答案: