AngularJS——8、表单

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>

 输出：