demo/core/list.html from netceteragroup/valdr

demo/core/list.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>

  <style>
    .demo-is-invalid label {
      color: red;
    }
    .demo-is-valid label {
      color: green;
    }
    .demo-is-invalid input {
      background-color: red;
    }
  </style>
</head>
<body ng-app="demoApp">

<div ng-controller="TestController">

  <h1>List Demo</h1>

  <form name="demoForm" novalidate>

    <div valdr-type="Person">

      <h4>Person</h4>
      <div valdr-form-group>
        <label for="firstName">First Name</label>
        <input type="text"
               id="firstName"
               name="firstName"
               ng-model="person.firstName">
        <span>$valid {{ demoForm.firstName.$valid }}</span>
      </div>
    </div>

    <div ng-form="addressForm" valdr-type="Address" ng-repeat="address in person.addresses">
      <h4>Address {{ $index + 1 }} <button ng-click="removeAddress(address)" >remove</button></h4>
      <div valdr-form-group>
        <label for="zipCode">Zip Code</label>
        <input type="text"
               id="zipCode"
               name="zipCode"
               ng-model="address.zipCode">
        <span>$valid {{ addressForm.zipCode.$valid }}</span>
      </div>

      <div valdr-form-group>
        <label for="email">E-Mail</label>
        <input type="text"
               id="email"
               name="email"
               ng-model="address.email">
        <span>$valid {{ addressForm.email.$valid }}</span>
      </div>
      <pre>{{ addressForm | json }}</pre>
    </div>

  </form>

  <button ng-click="addAddress()">Add address</button>
  <pre>demoForm.$valid: {{ demoForm.$valid }}</pre>

  <h3>demoForm</h3>
  <pre>{{ demoForm | json }}</pre>

  <h3>constraints</h3>
  <pre>{{ constraints | json }}</pre>

</div>

<script src="/bower_components/angular/angular.js"></script>
<script src="../js/valdr.min.js"></script>
<script src="http://localhost:35729/livereload.js"></script>

<script>
  var demoApp = angular.module('demoApp', ['valdr']);

  demoApp.config(function (valdrProvider) {
    valdrProvider.addConstraints({
      'Person': {
        'firstName': {
          'size': {
            'min': 2,
            'max': 20,
            'message': 'First name must be between 2 and 20 characters.'
          }
        }
      },
      'Address': {
        'email': {
          'email': {
            'message': 'Must be a valid E-Mail address.'
          }
        },
        'zipCode': {
          'size': {
            'min': '4',
            'max': '6',
            'message': 'Zip code must be between 4 and 6 characters.'
          }
        }
      }
    });
  });

  demoApp.controller('TestController', function ($scope, valdr) {
    // use custom classes on the surrounding elements
    valdr.setClasses({
      valid: 'demo-is-valid',
      invalid: 'demo-is-invalid'
    });

    $scope.person = {
      addresses: []
    };

    $scope.constraints = valdr.getConstraints();

    $scope.addAddress = function () {
      $scope.person.addresses.push({});
    };

    $scope.removeAddress = function(address) {
      var index = $scope.person.addresses.indexOf(address);
      $scope.person.addresses.splice(index, 1);
    };
  });
</script>
</body>
</html>