Angularjs 使用Angualrjs对可编辑行表单进行验证
我是Anguarljs新手,正在处理可编辑行表单。在这个表单中,当我要添加行按钮时,它会显示新行。但当我要添加保存按钮而不输入数据时,它会显示“空”,而不是设置“文本处于表单中。我希望在文本框为空或未选择下拉列表时出现一些警告消息。请告诉我应该在哪里更改代码。如何在此表单中执行验证 以下代码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
<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}}}
只需阅读有关表单的文档
关于输入谢谢你的回复。我不是要求简单的表单验证。我已经完成了。但问题出在可编辑行。我想验证它,而不是简单的表单