AngularJS——8、表单

原创于 2020-01-16 13:23:24 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS

AngularJS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用AngularJS进行表单的输入验证和默认值重置，包括使用ng-app、ng-controller、ng-model等指令实现动态数据绑定，以及通过$dirty、$valid、$pristine和$invalid等属性进行表单状态检查。

1、简单实例

<div ng-app="xxApp" ng-controller="xxCtrl">
    <form novalidate>
        First Name: <input type="text" ng-model="user">
        <br>
        <button ng-click="reset()">reset</button>
    </form>
    <p>表单值：{{user}}</p>
    <p>默认值：{{default}}</p>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.default = "Evan Lee";
        $scope.reset = function() {
            $scope.user = angular.copy($scope.default);
        };
        $scope.reset();
    });
</script>

输出：

2、输入验证

$dirty 表单有填写记录 $valid 字段内容合法

$pristine 表单没有填写记录 $invalid 字段内容非法

<!-- 表单属性 novalidate 用于禁用浏览器默认的验证。 -->
<form ng-app="xxApp" ng-controller="xxCtrl" name="xxForm" novalidate>
    <p>用户名：
        <input type="text" name="user" ng-model="user" required>
        <span style="color:red" ng-show="xxForm.user.$dirty && xxForm.user.$invalid">
            <span ng-show="xxForm.user.$error.required">用户名不能为空</span>
        </span>
    </p>
    <p>邮&nbsp;&nbsp;&nbsp;箱：
        <input type="email" name="email" ng-model="email" required>
        <span style="color:red" ng-show="xxForm.email.$dirty && xxForm.email.$invalid">
            <span ng-show="xxForm.email.$error.required">邮箱不能为空</span>
            <span ng-show="xxForm.email.$error.email">非法的邮箱地址！</span>
        </span>
    </p>
    <p>
        <input type="submit"
                ng-disabled="xxForm.user.$dirty && xxForm.user.$invalid ||  
                             xxForm.email.$dirty && xxForm.email.$invalid">
    </p>
</form>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.user = 'Evan Lee';
        $scope.email = 'EvanLee@mf.com';
    });
</script>

输出：