Custom field invalidate.

by Jonatas Piazzi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-animate.js"></script>
<div ng-app="myApp" ng-controller="SampleController">
  <ng-form name="frm">
    <div class="form-field">
      <input type="text" required ng-model="v1" />
    </div>
    <div class="form-field">
      <my-directive ng-model="v2" />
    </div>
    <p>
      <span>Form:</span>
      <span>{{frm.$valid ? 'valid' : 'invalid'}}</span>
    </p>
    <input type="button" ng-disabled="!frm.$valid" value="save" />
  </ng-form>
</div>

CSS

.form-field { margin: 4px 0; }
.my-directive {
  width: 172px;
  display: inline-block;
  text-align: center;
  padding: 2px 0;
}

.my-directive.on { background: #008800; }
.my-directive.off { background: #cc0000; }

JavaScript

var app = angular.module('myApp', []);

function myDirectiveCtrl($scope) {
	$scope.onClick = function () {
  	$scope.status = !$scope.status;
	};
}

function myDirectiveLink(scope, element, attrs, ngModelCtrl) {
	ngModelCtrl.$validators["my Directive"] = function () {
  	return !!scope.status;
  };
  
  console.log(ngModelCtrl);
}

var myDirectiveTemplateHtml = "" +
	'<div class="my-directive"' +
  '     ng-class="{\'on\': status, \'off\': !status}"' +
  '     ng-click="onClick()">' +
  '  click me' +
  '</div>';

app
	.directive('myDirective', function () {
  	return {
    	restrict: 'E',
      require: 'ngModel',
      template: myDirectiveTemplateHtml,
      scope: { status: "=ngModel" },
      controller: myDirectiveCtrl,
      link: myDirectiveLink
    }
  })
	.controller('SampleController', ['$scope', function($scope) {
    
    $scope.v1 = "test";
    $scope.v2 = false;
    
	}]);