AngularJS_3 Form

来源：互联网发布：杜兰特新秀体测数据编辑：程序博客网时间：2024/06/05 09:08

(This is the note of angular course from HKUST)

With the help of Angular form validation, we can do most validation work in the client side.

For a very usual case - string, we can use regular expression to do the validation.

About the two way binding, I wrote a very simple example, which can add different elements to the list.

<!DOCTYPE html><html lang="en" ng-app="testApp"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head          content must come *after* these tags -->    <title>two-way binding</title>        <!-- Bootstrap --><!-- build:css styles/main.css -->    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"><!-- endbuild --></head><body>    <div class="container" ng-controller="TwoWayBindingController">        <div class="row row-content">            <div class="tab-content">                <ul>                    <li ng-repeat="comment in comments">{{comment}}</li>                </ul>            </div>            <hr>            <form class="form-horizontal" role="form" name="commentForm" ng-submit="sendComment()">                <p>Your input: {{inputTemp}}</p>                <br>                <input type="text" class="form-control" id="comment" name="comment"                                    placeholder="Comment" ng-model="inputTemp" required>                <button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Send</button>            </form>       </div>    </div><!-- build:js scripts/main.js -->    <script src="../bower_components/angular/angular.min.js"></script>    <script>        var app = angular.module('testApp',[]);        app.controller('TwoWayBindingController', ['$scope', function($scope) {            $scope.comments=[                "abc1",                "abc2",                "abc3"            ];            $scope.inputTemp="";            $scope.sendComment = function() {                // alert($scope.inputTemp)                $scope.comments.push($scope.inputTemp);                $scope.inputTemp = ""                // alert($scope.inputTemp)            };        }]);    </script><!-- endbuild --></body></html>

for a complicated form case, here is the example of Angular Form from course.
The HTML,

<!DOCTYPE html><html lang="en" ng-app="FormApp"><head>     <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head          content must come *after* these tags -->    <title>Ristorante Con Fusion: About Us</title>        <!-- Bootstrap --><!-- build:css styles/main.css -->    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">    <link href="styles/bootstrap-social.css" rel="stylesheet">    <link href="styles/mystyles.css" rel="stylesheet"><!-- endbuild --></head><body>    <div class="container" ng-controller="ContactController">        <div class="row row-content">            <div class="col-xs-12">                <h3>Send us your Feedback</h3>             </div>            <div class="col-xs-12 col-sm-9" ng-controller="FeedbackController">                <!-- use 'novalidate' to disable the HTML5 validation work -->                <form class="form-horizontal" role="form" name="feedbackForm" ng-submit="sendFeedback()" novalidate>                    <div class="form-group" ng-class="{'has-error' : feedbackForm.firstname.$error.required && !feedbackForm.firstname.$pristine }">                        <label for="firstname" class="col-sm-2 control-label">First Name</label>                        <div class="col-sm-10">                            <!-- use the ng-model to bind the value, it can access the object in outter controller! -->                            <input type="text" class="form-control" id="firstname" name="firstname"                                    placeholder="Enter First Name" ng-model="feedback.firstName" required>                            <span ng-show="feedbackForm.firstname.$error.required && !feedbackForm.firstname.$pristine" class="help-block">                                Your First name is required.                            </span>                        </div>                    </div>                    <div class="form-group" ng-class="{'has-error' : feedbackForm.lastname.$error.required && !feedbackForm.lastname.$pristine }">                        <label for="lastname" class="col-sm-2 control-label">Last Name</label>                        <div class="col-sm-10">                            <input type="text" class="form-control" id="lastname" name="lastname"                                    placeholder="Enter Last Name" ng-model="feedback.lastName" required>                            <span ng-show="feedbackForm.lastname.$error.required && !feedbackForm.lastname.$pristine" class="help-block">                                Your Last name is required.                            </span>                        </div>                    </div>                    <div class="form-group">                        <label for="telnum" class="col-sm-2 control-label">Contact Tel.</label>                        <div class="col-xs-5 col-sm-4 col-md-3">                            <div class="input-group">                                <div class="input-group-addon">(</div>                                    <!-- the tel.areaCode is not exsited in the JS file now, it will be auto created -->                                    <input type="tel" class="form-control" id="areacode" name="areacode"                                            placeholder="Area code" ng-model="feedback.tel.areaCode" required>                                <div class="input-group-addon">)</div>                            </div>                        </div>                        <div class="col-xs-7 col-sm-6 col-md-7">                                <!-- auto create the nested js object -->                                <input type="tel" class="form-control" id="telnum" name="telnum"                                        placeholder="Tel. number" ng-model="feedback.tel.number" required>                        </div>                    </div>                    <div class="form-group" ng-class="{'has-error has-feedback' : feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine }">                        <label for="emailid" class="col-sm-2 control-label">Email</label>                        <div class="col-sm-10">                            <input type="email" class="form-control" id="emailid" name="emailid"                                    placeholder="Email" ng-model="feedback.email" required>                            <span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine"                                   class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>                            <span ng-show="(feedbackForm.emailid.$invalid || feedbackForm.emailid.$error.required) && !feedbackForm.emailid.$pristine"                                   class="help-block">Enter a valid email address.</span>                        </div>                    </div>                    <!-- this part is a little bit complicated -->                    <div class="form-group"  ng-class="{'has-error' : invalidChannelSelection}">                                               <div class="checkbox col-sm-5 col-sm-offset-2">                            <label class="checkbox-inline">                                <input type="checkbox" ng-model="feedback.agree">                                <strong>May we contact you?</strong>                            </label>                        </div>                        <div class="col-sm-3 col-sm-offset-1" ng-show="feedback.agree">                            <select class="form-control" ng-model="feedback.mychannel"                                     ng-options="channel.value as channel.label for channel in channels">                                <option value="">Tel. or Email?</option>                            </select>                            <span ng-show="invalidChannelSelection" class="help-block">                                Select an option.                            </span>                        </div>                    </div>                       <div class="form-group">                        <label for="feedback" class="col-sm-2 control-label">Your Feedback</label>                        <div class="col-sm-10">                            <textarea class="form-control" id="feedback" name="feedback"                                       rows="12" ng-model="feedback.comments"></textarea>                        </div>                    </div>                    <div class="form-group">                        <div class="col-sm-offset-2 col-sm-10">                            <button type="submit" class="btn btn-primary" ng-disabled="feedbackForm.$invalid">Send Feedback</button>                        </div>                    </div>                </form>            </div>            <div class="col-xs-12 col-sm-3">              <h3>Your Current Feedback:</h3>              <p>{{feedback.firstName}} {{feedback.lastName | uppercase}}</p>              <p>Contact Tel.: ({{feedback.tel.areaCode}}) {{feedback.tel.number}}</p>              <p>Contact Email: {{feedback.email}}</p>              <p ng-show="feedback.agree">Contact by: {{feedback.mychannel}}</p>              <p>Comments: {{feedback.comments}}</p>            </div>            </div>    </div><!-- build:js scripts/main.js -->    <script src="../bower_components/angular/angular.min.js"></script>    <script src="scripts/angular.js"></script><!-- endbuild --></body></html>

and here is the js code:

'use strict';var app = angular.module('FormApp',[]);app.controller('ContactController',['$scope', function($scope){        $scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:""};        $scope.channels = [{value:"tel", label:"Tel."}, {value:"Email", label:"Email"}];        $scope.invalidChannelSelection = false;    }])    .controller('FeedbackController',['$scope', function($scope){        $scope.sendFeedback = function() {            console.log($scope.feedback);            if ($scope.feedback.agree && ($scope.feedback.mychannel == "") && !$scope.feedback.mychannel) {                $scope.invalidChannelSelection = true;                console.log('incorrect');            }            else {                $scope.invalidChannelSelection = false;                $scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" };                $scope.feedback.mychannel = "";                $scope.feedbackForm.$setPristine();                console.log($scope.feedback);            }        };    }]);

0 0