Angularjs 使用Angualrjs对可编辑行表单进行验证

Angularjs 使用Angualrjs对可编辑行表单进行验证,angularjs,asp.net-mvc-4,Angularjs,Asp.net Mvc 4,我是Anguarljs新手,正在处理可编辑行表单。在这个表单中,当我要添加行按钮时,它会显示新行。但当我要添加保存按钮而不输入数据时,它会显示“空”,而不是设置“文本处于表单中。我希望在文本框为空或未选择下拉列表时出现一些警告消息。请告诉我应该在哪里更改代码。如何在此表单中执行验证 以下代码 <div ng-controller="EditableRowCtrl"> <table class="table table-bordered table-hover table-c

我是Anguarljs新手,正在处理可编辑行表单。在这个表单中,当我要添加行按钮时,它会显示新行。但当我要添加保存按钮而不输入数据时,它会显示“空”,而不是设置“文本处于表单中。我希望在文本框为空或未选择下拉列表时出现一些警告消息。请告诉我应该在哪里更改代码。如何在此表单中执行验证 以下代码

<div ng-controller="EditableRowCtrl">
  <table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold">
      <td style="width:35%">Name</td>
      <td style="width:20%">Status</td>
      <td style="width:20%">Group</td>
      <td style="width:25%">Edit</td>
    </tr>
    <tr ng-repeat="user in users">
      <td>
        <!-- editable username (text with validation) -->
        <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
          {{ user.name || 'empty' }}
        </span>
      </td>
      <td>
        <!-- editable status (select-local) -->
        <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
          {{ showStatus(user) }}
        </span>
      </td>
      <td>
        <!-- editable group (select-remote) -->
        <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">
          {{ showGroup(user) }}
        </span>
      </td>
      <td style="white-space: nowrap">
        <!-- form -->
        <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
          <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>
        <div class="buttons" ng-show="!rowform.$visible">
          <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
          <button class="btn btn-danger" ng-click="removeUser($index)">del</button>
        </div>  
      </td>
    </tr>
  </table>

  <button class="btn btn-default" ng-click="addUser()">Add row</button>
</div>

名称
地位
团体
编辑
{{user.name | |'empty'}
{{showStatus(用户)}
{{showGroup(用户)}
拯救
取消
编辑
德尔
添加行

可以使用输入字段中的属性,如
ng minlength=“3”
ng required
来验证角度形状

然后,您可以使用
myForm.myInput.$valid

这里有一个关于如何使用angularjs验证表单的示例

<script>
   angular.module('inputExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.user = {name: 'guest', last: 'visitor'};
     }]);
</script>

<div ng-controller="ExampleController">
  <form name="myForm">
    User name: <input type="text" name="userName" ng-model="user.name" required>
    <span class="error" ng-show="myForm.userName.$error.required">
      Required!</span><br>
    Last name: <input type="text" name="lastName" ng-model="user.last"
      ng-minlength="3" ng-maxlength="10">
    <span class="error" ng-show="myForm.lastName.$error.minlength">
      Too short!</span>
    <span class="error" ng-show="myForm.lastName.$error.maxlength">
      Too long!</span><br>
  </form>
  <hr>
  <tt>user = {{user}}</tt><br/>
  <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
  <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
  <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
  <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
  <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
  <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
</div>

angular.module('inputExample',[])
.controller('ExampleController',['$scope',function$scope){
$scope.user={name:'guest',last:'visitor'};
}]);
用户名:
必需的
姓氏: 太短了! 太久了

user={{user}}
myForm.userName.$valid={{myForm.userName.$valid}}
myForm.userName.$error={{{myForm.userName.$error}}}
myForm.lastName.$valid={{myForm.lastName.$valid}}
myForm.lastName.$error={{myForm.lastName.$error}}
myForm.$valid={{myForm.$valid}}}
myForm.$error.required={{{!!myForm.$error.required}}}
myForm.$error.minlength={{{!!myForm.$error.minlength}}}
myForm.$error.maxlength={{{!!myForm.$error.maxlength}}}
只需阅读有关表单的文档


关于输入

谢谢你的回复。我不是要求简单的表单验证。我已经完成了。但问题出在可编辑行。我想验证它,而不是简单的表单