Angular form

参考 http://blog.xebia.com/2013/10/15/angularjs-validating-radio-buttons/

http://stackoverflow.com/questions/19632933/angularjs-group-check-box-validation

html

验证的require maxlength 等是根据 表单名.元素名
controller获取数据是根据ng-model
  <form name="form1" class="form-group"
       ng-class="{ 'has-error' : form1.username.$invalid && !form1.username.$pristine }">
       <label>Username</label>
       <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required/>
       <p ng-show="form1.username.$error.required" class="help-block">Tell us your Username</p>
       <p ng-show="form1.username.$error.minlength" class="help-block">Username is too short.</p>
       <p ng-show="form1.username.$error.maxlength" class="help-block">Username is too long.</p>
       <br>
       <label>Email</label>
       <input class="form-control" type="email" ng-model="user.email" name="email" required/><br />
       <p ng-show="form1.email.$error.required" class="help-block">Tell us your email.</p>
       <p ng-show="form1.email.$error.email" class="help-block">email wrong.</p>
      <label>Gender:</label>
      <label class="radio" ng-repeat="gen in genders">
        <input type="radio" ng-model="user.gender" name="gender"  value="{{gen.id}}" required/><span>{{gen.text}}</span>
      </label>
      <label>Hobby:</label>
      <label class="checkbox" ng-repeat="hobby in hobbies">
        <input type="checkbox" ng-model="user.hobbies[hobby.id]" name="hobby"  value="{{hobby.id}}" required/><span>{{hobby.text}}</span>
      </label>
<p>自定义验证</p>

       <button ng-click="save(user)" class="btn btn-default">Submit</button>
       <button ng-click="reset()" class="btn btn-default">reset</button>
  </form>
   <pre>form = {{user | json}}</pre>
    <pre>saved = {{saved | json}}</pre>

controller

    //测试form1
    $scope.saved = {};
    $scope.genders = [{id:'1',text:'male'},{id:'2',text:'female'}];
    $scope.hobbies = [{id:'1',text:'haha'},{id:'2',text:'hehe'}];
    $scope.save = function(user){
      $scope.saved = angular.copy(user);
    }
    $scope.reset = function() {
          console.log($scope.user);
          $scope.user = angular.copy($scope.saved);
    };