JSFiddle - React, Tailwind, and code Playground

by Nilesh Injulkar

HTML

<div ng-app='startApp'>
    
    <div ng-controller='mycontroller'>
    <form name='forms'>
        {{surname}}
        <br/>
        Name : 
        <input name="myname" ng-model="thename" ng-maxlength="5"
         required></input>
        <div class="validationMessage" 
            ng-show="forms.myname.$dirty && forms.myname.$invalid">
            <div ng-show="forms.myname.$error.required">
                Message name is required.
            </div>
            <div ng-show="forms.myname.$error.maxlength">
                Maximum 5 character length exceeded.
            </div>
        </div>
        
        <br/>
        Date : 
        <dateone nameatt='startDate'date='date'></dateone>
        <div class="validationMessage" 
        ng-show="forms.startDate.$dirty">    
            <div ng-show="forms.startDate.$error.required">
                   Date is required.
            </div>
            <div ng-show="forms.startDate.$error.noslash">
                   Slash it please
            </div>
        </div>
        {{forms.startDate}}
        
    </form>
    </div>
</div>

CSS

.validationMessage {
    color: 'red';
}

JavaScript

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

startAppModule.controller('mycontroller', function($scope){
    $scope.surname = "Injulkar";
    $scope.thename = "Nilesh";
    $scope.date = '25/10/2012';
});


startAppModule.directive('nilesh', function(){
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl){
            console.log('Nilesh', scope.dt, scope.date);
        
            ctrl.$parsers.unshift(function(viewValue){
				if(viewValue.indexOf('/')===-1) {
					ctrl.$setValidity('noslash', false);
					return undefined;
				} else {
					ctrl.$setValidity('noslash', true);
					return viewValue;
				}
			});
            
        }
    };
});

startAppModule.directive("dynamicName",function($compile){
  return {
      restrict:"A",
      terminal:true,
      priority:1000,
      link:function(scope,element,attrs){
          console.log(attrs.dynamicName);
          console.log("-", scope);
          var name = scope.$eval(attrs.dynamicName);
          console.log("--", name);
          if (name) {
            element.attr('name', name);
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
          }
      }
   };
});

startAppModule.directive('dateone', function($compile){
    return {
        restrict: 'E',
        scope: {
            date: '='
        },
        template: "<input type='text' ng-model='dt' \
            dynamic-name='dateinputname' required nilesh>",
        link : function(scope, elem, attrs){
            scope.dateinputname =  attrs.nameatt;
            scope.format = 'MM/dd/yyyy';
            scope.dt = scope.date;
            $compile(elem.contents())(scope);
            scope.$watch('dt', function () {
            		scope.date = scope.dt;
            });
        }
    };
});