Angularjs窗体正在更新操作后提交

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