JSFiddle - React, Tailwind, and code Playground

by Nilesh Injulkar

HTML

<div ng-app='startApp'>
    
    <div ng-controller='mycontroller'>
    <form name='forms'>
        {{name}}
        <br/>
        {{noNameFlag}}
        <br/>
        Name : 
        <input name="myname" ng-model="name" warning-input 
        empty-warning="Required please" warning-flag="noNameFlag"/>
        <button ng-disabled="noNameFlag">Click</button>
    </form>
    </div>
</div>

CSS

.warningInput {
  background-color : #FCBCBC;
  color : #891010;
}

JavaScript

var startAppModule = angular.module('startApp',[]);

startAppModule.controller('mycontroller', function($scope){
    $scope.name = "";
    $scope.noNameFlag = true;
});

startAppModule.directive('warningInput', function () {
    
	return {
      restrict: 'A',
	  scope : {
		ngModel : '=',
		warningFlag : '='
	  },
      link: function(scope, element, attrs) {
       	console.log(scope.ngModel);
		var warningText = attrs['emptyWarning'];
		if(isEmpty(scope.ngModel)) {
			setWarning();
		} 
		  element.blur(function(){
		  	if(isEmpty(scope.ngModel)){
				setWarning();
			}
		  });
		  
		  element.click(function(){
		  	resetWarning();
		  });
		  
		  
		function isEmpty(input) {
			return (input === null || input === undefined || input.trim() === '');
		};
		  function setWarning() {
			element.val(warningText);
			 //scope.ngModel = warningText;
		  	element.addClass('warningInput');
			  scope.warningFlag = true;
		  };
		  
		  function resetWarning() {
			element.val('');
			//scope.ngModel = '';
		  	element.removeClass ('warningInput');
			scope.warningFlag = false;			
		  };
      }
    };
  });