建立一個登錄檔單，表單中包括使用者名稱字，郵件地址，和使用者名稱（暱稱）；

1、開始定義一個表單

 <form name="signup_form" novalidateng-submit="signupForm()">
        <fieldset>
            <legend>Signup</legend>


            <button type="submit" class="button radius" >Submit</button>
                </div
 
>
            </div>
        </fieldset>
    </form>

表單名稱是signup_form，當表單提交時我們呼叫signupForm（）。
2、新增使用者名稱稱
設定了一些驗證，驗證name欄位長度大於3小於20，要求欄位必填。

<div class="row">
   <div class="large-12 columns">
       <label>Your name</label>
       <input type="text" placeholder="Name"
 
 name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required />
       <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
          <small class="error" ng-show="signup_form.name.$error.required">Your name is required.</small>
          <small class
 
="error" ng-show="signup_form.name.$error.minlength">Your name is required to be at least 3 characters.</small>
          <small class="error" ng-show="signup_form.name.$error.maxlength">Your name cannot be longer than 20 characters.</small>
       </div>
   </div>
</div>

3、新增email

<div class="row">
                <div class="large-12 columns">
                    <label>Your email</label>
                    <input type="email" placeholder="Email" name="email" ng-model="signup.email" ng-minlength="3" ng-maxlength="20" required />
                    <div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
                        <small class="error" ng-show="signup_form.email.$error.required">Your email is required.</small>
                        <small class="error" ng-show="signup_form.email.$error.minlength">Your email is required to be at least 3 characters.</small>
                        <small class="error" ng-show="signup_form.email.$error.maxlength">Your email cannot be longer than 20 characters.</small>
                    </div>
                </div>
            </div>

4、新增使用者名稱
功能與上面相同並添加了一個自定義驗證

HTML

<div class="row">
                <div class="large-12 columns">
                    <label>Username</label>
                    <input type="text" placeholder="Desired username" name="username" ng-model="signup.username" ng-minlength="3" ng-maxlength="20" ensure-unique="username" required />
                    <div class="error" ng-show="signup_form.username.$dirty && signup_form.username.$invalid">
                        <small class="error" ng-show="signup_form.username.$error.required">Please input a username.</small>
                        <small class="error" ng-show="signup_form.username.$error.minlength">Your username is required to be at least 3 characters.</small>
                        <small class="error" ng-show="signup_form.username.$error.maxlength">Your username cannot be longer than 20 characters.</small>
                        <small class="error" ng-show="signup_form.username.$error.unique">That username is taken,please try another.</small>
                    </div>
                </div>
            </div>

JavaScript

 <script>
        var app = angular.module('myApp',[]);
        app.directive('ensureUnique',function($http){
            return {
                require: 'ngModel',
                link: function(scope, ele, attrs, c){
                    scope.$watch(attrs.ngModel, function(n){
                        if(!n) return;
                        $http({
                            method: 'POST',
                            url: '/api/check/' + attrs.ensureUnique,
                            data: {
                                field: attrs.ensureUinque,
                                value: scope.ngModel
                            }
                        }).success(function(data){
                            c.$setValidity('unique',data.isUnique);
                        }).error(function(data){
                            c.$setValidity('unique',false);
                        });
                    });
                }
            };
        });
    </script>

最後，把按鈕放進去。用ng-disabled指令基於表單的合法性來啟用或禁用按鈕

<button type="submit" class="button radius" ng-disabled="signup_form.$invalid">Submit</button>