Angular之Form指令

半兽人 发表于: 2018-10-02   最后更新时间: 2018-10-02 19:02:54  
{{totalSubscript}} 订阅, 3,597 游览

Angular之Form指令

  • HTML原生的form表单是不能嵌套的,而AngularJS封装之后的form可以嵌套;
  • AngularJS为form扩展了自动效验,防止重复提交等功能;
  • AngularJS对input元素的type进行了扩展,一共提供了一下10种类型:text、number、url、email、radio、CheckBox、hidden、button、submit、reset
  • AngularJS为表单内置了4种CSS样式:ng-valid、ng-invaild、ng-pristine、ng-dirty
  • 内置效验器:require、minlength、maxlength

先看一个简单的,如果你不填写内容,angularjs会把input框变成红色,按钮也变成不可用。

html:

<html ng-app='TestFormModule'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="FormBasic.js"></script>
    </head>
    <body>
        <form name="myForm" ng-submit="save()" ng-controller="TestFormModule">
              <input name="userName" type="text" ng-model="user.userName" required/>
              <input name="password" type="password" ng-model="user.password" required/>
              <input type="submit" ng-disabled="myForm.$invalid"/>
        </form>
    </body>
</html>

js:

var appModule = angular.module('TestFormModule', []);
appModule.controller("TestFormModule",function($scope){
    $scope.user={
        userName:'damoqiongqiu',
        password:''
    };
    $scope.save=function(){
        alert("保存数据!");
    }
});

我们在html表单中,设置了required,在submit按钮,设置了ng-disabled="myForm.$invalid"来设置是否效验通过。

复杂的例子

<!doctype html>
<html ng-app>
    <head>
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="FormAdv1.js"></script>
    </head>
    <body>
        <div ng-controller="Controller">
            <form name="form" class="css-form" novalidate>
                Name:
                <input type="text" ng-model="user.name" name="uName" required /><br/>
                E-mail:
                <input type="email" ng-model="user.email" name="uEmail" required /><br/>
                <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">
                    Invalid:
                    <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
                    <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
                </div>
                Gender:<br/>
                <input type="radio" ng-model="user.gender" value="male" />
                male
                <input type="radio" ng-model="user.gender" value="female" />
                female<br/>
                <input type="checkbox" ng-model="user.agree" name="userAgree" required />
                I agree:
                <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required />
                <div ng-show="!user.agree || !user.agreeSign">
                    Please agree and sign.
                </div>
                <br/>
                <button ng-click="reset()" ng-disabled="isUnchanged(user)">
                    RESET
                </button>
                <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">
                    SAVE
                </button>
            </form>
        </div>
    </body>
</html>

js:

function Controller($scope) {
    $scope.master = {};

    $scope.update = function(user) {
        $scope.master = angular.copy(user);
    };

    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };

    $scope.isUnchanged = function(user) {
        return angular.equals(user, $scope.master);
    };

    $scope.reset();
}

这个例子呢,可以重置表单,可以验证邮箱,可以勾选提示。

自定义表单

我们通过用div来模拟输入项,来防止黑客的攻击行为。

<!doctype html>
<html ng-app="form-example2">
    <head>
        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <style type="text/css">
            div[contentEditable] {
                cursor: pointer;
                background-color: #D0D0D0;
            }
        </style>
    </head>
    <body>
        <div>
            <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
            <pre>model = {{content}}</pre>
        </div>
    </body>
</html>

<script>
angular.module('form-example2', []).directive('contenteditable', function() {
    return {
        require : 'ngModel',
        link : function(scope, elm, attrs, ctrl) {
            // view -> model
            elm.bind('keyup', function() {
                scope.$apply(function() {
                    ctrl.$setViewValue(elm.text());
                });
            });

            // model -> view
            ctrl.$render = function() {
                elm.html(ctrl.$viewValue);
            };

            // load init value from DOM
            ctrl.$setViewValue(elm.html());
        }
    };
});
</script>

效果:

screenshot

更新于 2018-10-02
在线,1小时前登录

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章