码迷,mamicode.com
首页 > Web开发 > 详细

Angularjs学习笔记5_form1

时间:2016-04-09 13:51:55      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

1.入门

   <form ng-controller="validationController" name="form1" novalidate>
       <p> <input type="submit" ng-disabled="form1.$invalid">     
         <input type="email" name="myemail" ng-model="email"  ng-minlength="10" ng-maxlength="50" required>

        // 使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。
         <span style="color:red" ng-show="form1.myemail.$dirty && form1.myemail.$invalid">

            <span ng-show="form1.myemail.$error.required">Email is required.</span>
            <span ng-show="form1.myemail.$error.email">Invalid email address.</span>
           <span ng-show="form1.myemail.$error.minlength">min length 10.</span>
           <span ng-show="form1.myemail.$error.maxlength">max length 50.</span>

         </span>
       </p>
     </form>

     表单属性 novalidate 用于禁用浏览器默认的验证。
$dirty    表单有填写记录
$valid字段内容合法的
$invalid    字段内容是非法的
$pristine    表单没有填写记录 
 

2.使用angular-messages

<!DOCTYPE html>
<html>
<head>
    <title>Form</title>
     <script type=‘text/javascript‘ src=‘http://cdn.bootcss.com/angular.js/1.4.9/angular.js‘></script>
     <script type=‘text/javascript‘ src=‘http://cdn.bootcss.com/angular.js/1.4.9/angular-messages.js‘></script>    
    <style type="text/css">
     .form1 {
       transition:all linear 0.5s;
       background: transparent;
     }
    </style>
</head>
<body ng-app="a8_8">
    <form name="form1" ng-controller="form1Controller" class="form1" novalidate>
     <label ng-show="user.id != undefined" ng-model="user.id">
        user id:<span>{{user.id}}</span>
     </label><br>   
     <label>Enter text: <input type="email" ng-model="email1" name="myemail" required  ng-minlength="10"  maxlength="15" /> </label>
      <div style="color:red" ng-messages="form1.myemail.$error" ng-messages-multiple role="alert" ng-if="form1.myemail.$touched">
        <div ng-message="required">Email is required.</div>
        <div ng-message="email">Invalid email address.</div>
        <div ng-message="minlength">min length 10.</div>
        <div ng-message="maxlength">max length 50.</div>        
      </div>
      <p> <input type="submit" value="提交" ng-disabled="form1.$invalid" /></p>   
      <span class="error" ng-show="form1.myemail.$error.required">Required!</span><br>
        <code>form1.myemail.$valid = {{form1.myemail.$valid}}</code><br>
        <code>form1.myemail.$error = {{form1.myemail.$error}}</code><br>
        <code>form1.$valid = {{form1.$valid}}</code><br>
        <code>form1.$error.required = {{!!form1.$error.required}}</code><br>    
     <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
     <button ng-click="update(user)" ng-disabled="form1.$invalid || isUnchanged(user)">SAVE</button> <br>
</body>
</html>

3.数据提交

   已经不用传统的submit,是基于model 的后台处理
   <script type="text/javascript">   
        var app = angular.module(‘a8_8‘,  [‘ngMessages‘]);
        app.controller(‘form1Controller‘, [‘$scope‘,function($scope) {
            $scope.user = {email:‘sweet_dreams@aliyun.com‘};
            $scope.master = {email:‘sweet_dreams@aliyun.com‘};
            $scope.update = function(user) {
                $scope.master = angular.copy(user);
                console.log( ‘save‘+user);     
                user.id=1;
                console.log( user);                   
            };
            $scope.reset = function() {
                $scope.user = angular.copy($scope.master);
            };
            $scope.isUnchanged = function(user) {
                return angular.equals(user, $scope.master);
            };             
         }]);
   </script>
 
 

Angularjs学习笔记5_form1

标签:

原文地址:http://www.cnblogs.com/dengzy/p/5369879.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!