JSFiddle - React, Tailwind, and code Playground

by Silvestrs Kante

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl as vm">
    <select form-validation-field valid-value="1" selected-option="vm.selectedOption" ng-model="vm.selectedOption" ng-options="option.value as option.label for option in vm.optionList">
      <option value="">Please select option</option>
    </select>
    <input type="text" ng-model="vm.selectedOption" />
  </div>
</div>

JavaScript

angular
  .module('myApp', [])
  .controller('myCtrl', function($scope) {
    var vm = this;
    vm.selectedOption = 3;
    vm.optionList = [{
      value: 1,
      label: "First"
    }, {
      value: 2,
      label: "Second"
    }, {
      value: 3,
      label: "Third"
    }];
  })
  .directive('formValidationField', formValidationField)
  .filter('debug', function() {
    return function(input) {
      if (input === '') return 'empty string';
      return input ? input : ('' + input);
    };
  });

formValidationField.$inject = ['$compile'];

function formValidationField($compile) {
  var elementPlacehodler = null;

  var directive = {
    link: link,
    restrict: 'A',
    transclude: 'element',
    replace: true,
    controller: function($scope) {
      this.IsValid = true;
    },
    controllerAs: "formValidationFieldCtrl",
    bindToController: true,
    scope: {
      validValue: "@",
      selectedOption: "=selectedOption"
    }
  };
  return directive;

  function link(scope, element, attrs, formValidationFieldCtrl, transclude) {
    console.log(arguments);
    transclude(function(clone, transScope) {
      // Notes: remove directives to avoid infinite transclusion loop
      clone.removeAttr("form-validation-field");
      clone.removeAttr("data-form-validation-field");

      clone.addClass("form-validation-field");
      
      $compile(clone)(transScope);
      
      element.after(clone);
    });

    scope.$watch('formValidationFieldCtrl.IsValid', function(value) {
    if (!!elementPlacehodler) {
        if (!!value) {
          element.removeClass("warning");
        } else {
          element.addClass("warning");
        }
      }      
    });

    scope.$watch('formValidationFieldCtrl.selectedOption', function(value) {
      console.log({
        ValidValue: formValidationFieldCtrl,
        SelectedOption: value,
        ScopeFromElement: arguments[2],
        Scope: scope
      });

      formValidationFieldCtrl.IsValid = true;

      if...