Question

您好我正在开发angularjs中的Web应用程序。我有一个crud操作在前端执行。我有group_name和group_description将它添加到数据库和相同的字段进行更新。我应用了以上两个字段的验证规则。

<div class="inputblock"
     ng-class="{ 'has-error' : ((form.$submitted && form.groupname.$invalid )|| (form.groupname.$invalid && form.groupname.$dirty))}">
    <div>
        <span class="ang-error" style="color:#fff" ng-show="form.groupname.$dirty && form.groupname.$invalid ">
            <span ng-show="form.groupname.$invalid && form.groupname.$dirty">* {{'Required' | translate}}</span>
            <span ng-show="form.groupname.$error.maxlength">{{'Input is too long!' | translate}}</span>
        </span>
    </div>
    <input class="with-icon" 
           type="text" 
           name="groupname" 
           placeholder="{{ 'Group Name' | translate }}"
           ng-model="user.name" 
           required my-maxlength="50">
    <input class="with-icon" 
           type="hidden" 
           name="grpID" 
           ng-model="user.grpID" 
           ng-bind="grpID" 
           value="{{grpID}}"
           id="grpID">
</div>

<div class="inputblock"
     ng-class="{ 'has-error' : ((form.$submitted && form.groupdesc.$invalid )|| (form.groupdesc.$invalid && form.groupdesc.$dirty))}">
    <div>
        <span class="ang-error" style="color:#fff" ng-show="form.groupdesc.$dirty && form.groupdesc.$invalid ">
            <span ng-show="form.groupdesc.$invalid && form.groupdesc.$dirty">* {{'Required' | translate}}</span>
        </span>
    </div>
    <input class="with-icon" 
    type="text" name="groupdesc" 
    placeholder="{{ 'Group Description' | translate }}"
    ng-model="user.desc" required my-maxlength="50">
 </div>

<div class="inputblock-buttons">
    <input type="submit" ng-click="creategroup()" value="{{Create}}" ng-bind="Create"/>
    <input type="button" value="{{ 'Cancel' | translate }}" ng-click="Cancel()"/>
</div>

下面我有网格，我列出了所有创建的组以及编辑和删除选项。我也有创造选择。每当我点击编辑，我在文本框中显示值，我允许用户更新它。同时我正在制作按钮创建进行编辑。

在页面加载时，如果这是要添加的新记录，我已初始化$scope.IsNewRecord = 1;。每当用户点击编辑时，我正在制作$scope.IsNewRecord = 0; 以下是我的创建/更新代码

$scope.creategroup = function (user) {
    if ($scope.form.$valid) {
        if ($scope.IsNewRecord == 0) {
            var groupID = document.getElementById('grpID').value;
            var updateGroupUrl = baseurl + "api/RolesPermission/" + groupID + "/updategroup/";
            var request = {
                url: updateGroupUrl,
                method: 'PUT',
                data: {
                    groupname: $scope.user.name,
                    groupdescription: $scope.user.desc
                },
                headers: {
                    RequestedPlatform: "Web",
                    RequestedLanguage: "English"
                }
            };
            $http(request).then(function (response) {
                $scope.user = {};
                getpermissiondetails();
                toastr.success($filter('translate')(response.data.msg));

            }, function (error) {
                toastr.error($filter('translate')(response.data.msg));
            })
        }
        else {
            var savegroupurl = baseurl + "api/RolesPermission/addgroup";
            var request = {
                url: savegroupurl,
                method: 'POST',
                data: {
                    groupname: $scope.user.name,
                    groupdescription: $scope.user.desc
                },
                headers: {
                    RequestedPlatform: "Web",
                    RequestedLanguage: "English"
                }
            };
            $http(request).then(function (response) {
                toastr.success($filter('translate')(response.data.msg));
                getpermissiondetails();
            }, function (error) {
                toastr.error($filter('translate')(error.data.msg));
            })
        }

    }
    else {

        toastr.error($filter('translate')('All fields are Required'), $filter('translate')('Validation Failed'));
    }
}

我可以创建或更新记录。但是一旦我更新记录，我的验证规则就会被解雇。它可能是形式试图再次提交。我在下面附上截图。我可以在上面的代码片段中知道我缺少什么吗？任何帮助将不胜感激。谢谢。

Answer 1

试试这个。我希望它会对你有所帮助。

ng-class="{ 'has-error' : form.groupname.$invalid && !form.groupname.$pristine, 'has-success' : form.groupname.$valid && !form.groupname.$pristine}"

或

ng-class="{ 'has-error' : user.name.$invalid && !user.name.$pristine, 'has-success' : user.name.$valid && !user.name.$pristine}"

Angularjs表单是在更新操作后提交的

1 个答案: