Angular Forms

by Alejandro M

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="myApp">
  <form id="myForm" name="myForm" novalidate ng-controller="FormController" ng-submit="submitForm()">
    <hr />
    <p ng-show="myForm.$pristine">Todavia no se uso el formulario -> pristine = true</p>
    <ul>
      <li><strong>$valid:</strong> booleano que marca True si el formulario es válido de acuerdo a las reglas definidas sobre este.</li>
      <li><strong>$invalid:</strong> booleano que marca True si al menos un componente del formulario no cumple con las reglas definidas.</li>
      <li><strong>$dirty:</strong> booleano que marca True si el usuario ha interactuado con al menos un componente del formulario. Por ejemplo, si el formulario consiste en dos campos de texto y el usuario ingresa información en uno de estos.</li>
      <li><strong>$pristine:</strong> booleano que marca True si el usuario no ha ingresado nada en el formulario, es decir si el formulario no se ha usado.</li>
    </ul>
    <hr />
    <div class="form-group">
      <label for="name">First Name (*):</label>
      <input id="name" class="form-control" name="firstName" type="text" placeholder="First Name" ng-model="newUser.firstName" pattern="[A-Za-z]+" checkuser required/>
      <span class="error-message" ng-show="!myForm.$pristine && myForm.firstName.$error.required">Campo incompleto</span>
      <span class="error-message" ng-show="!myForm.$pristine && myForm.firstName.$error.pattern">Solo se aceptan letras </span>
      <span class="error-message" ng-show="!myForm.$pristine && myForm.firstName.$error.userLong">Custom error : mas de 5 letras</span>
      <span class="error-message" ng-show="!myForm.$pristine && myForm.firstName.$error.userUpercase">Custom error : solo mayusculas</span>
    </div>
    <div class="form-group">
      <label for="surname">Last Name (*):</label>
      <input id="surname" class="form-control" name="lastName" type="text"...

CSS

body {
  padding: 20px 40px;
}

input.ng-dirty.ng-invalid,
input.ng-invalid.ng-touched {
  border: 1px solid red;
}

.error-message {
  display: block;
  color: red;
}

JavaScript

var app = angular.module("myApp", []);
app.controller("FormController", ["$scope", function($scope) {
  $scope.newUser = {
    firstName: '',
    lastName: '',
    subscribeNews: false,
    acceptConds: false
  };
  $scope.submitForm = function() { //se llama desde el elemento form
    alert("s")
  };
  $scope.showMessage = function(value) {
  	console.log(value.$error)
    //!$scope.myForm.$pristine // negando pristine el mensaje se oculta si no completo algun campo
    var show = !$scope.myForm.$pristine && !value.$valid;
    return show;
  };
}]);

// directiva custom de validacion
app.directive('checkuser', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attr, ngModel) {
      ngModel.$parsers.unshift(function(value) {
        if (value.length > 5) {
          ngModel.$setValidity('userLong', true);
        } else {
          ngModel.$setValidity('userLong', false);
        }
        if (value == value.toUpperCase()) {
          ngModel.$setValidity('userUpercase', true);
        } else {
          ngModel.$setValidity('userUpercase', false);
        }
        return value;
      });
    }
  };
});