Angularjs form is submitting after update operation

Question

Hi I am developing web application in angularjs. I have one crud operation to perform in front end. I have group_name and group_description to add it to database and same fields to update. I am applied validation rules for above two fields.

<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>

below this i have grid where i am listing all the groups created along with edit and delete option. also i have create option. Whenever i click on edit i am displaying values in textbox and i am allowing user to update it. Same time i am making button create to edit.

On page load i have initialised $scope.IsNewRecord = 1; if this is the new record to add. whenever user clicks on edit i am making $scope.IsNewRecord = 0; Below is my code for Create/Update

$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'));
    }
}

I am able to create or update the records. But as soon as i update the record my validation rules are firing. It may be form is trying to submit again. I have attached screenshot below. May i know what i am missing in the above code snippet? Any help would be greatly appreciated. Thank you.

Answer 1

Try this. I hope it will help you.

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

or

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