Question

我正在尝试使用Angular Agility进行表单验证。我正在尝试使用正确的错误消息和颜色概述表单元素的简单示例。到目前为止，我没有走得太远。我已经看过演示示例，但没有明确的代码示例，除非我做了一些严重错误的事情。

有人能告诉我一个如何正确使用它的例子吗？

例如，我如何能够获取以下html以显示表单元素周围的错误消息和验证大纲？

来自文档？

<div ng-form="exampleForm" class="form-horizontal">
    <input type="number" aa-field-group="person.age" min="0" max="140" required>
</div>

提前致谢。

Answer 1

假设你有angular.js和angular-agility.js，这里有一个工作样本

<!Doctype html>
<head>
 <link href="https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/aa.formExtensionsOptional.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div ng-app="angularAgilitySimpleExample" ng-controller="indexCtrl">
        <div ng-form="exampleForm">
            <input type="number" aa-field-group="person.age" min="0" max="140" required>
        </div>
    </div>

    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="angular-agility.js"></script>
    <script type="text/javascript">
        angular.module('angularAgilitySimpleExample', ['aa.formExtensions', 'aa.notify']);
       </script>
</body>
</html>

如果您看不到样式，请从https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/aa.formExtensionsOptional.css下载css并在本地使用

您可以从angular-agility team https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/index.html

中找到完整的示例

Answer 2

此plnkr显示如何验证名字，显示错误消息并在表单元素周围显示绿色/红色轮廓：

http://plnkr.co/edit/V4vDiu?p=preview

<!DOCTYPE html>
<html ng-app="exampleModule">
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://code.angularjs.org/1.2.8/angular.js"></script>
<script src="aa.formExtensions.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="exampleController" ng-form="exampleForm">

<div>
    <input type="text" required="" ng-minlength="2" ng-maxlength="30"
           aa-auto-field="firstName" />
</div>

    <button aa-save-form="save()">Save</button>
</div>

</body>
</html>

谁能给我一个如何使用角度敏捷的例子

2 个答案: