JSFiddle - React, Tailwind, and code Playground

by mzmmohideen

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
  var model = element(by.binding('model'));
  var input = element(by.id('input'));

  it('should validate the input with the default pattern', function() {
    input.sendKeys('aaa');
    expect(model.getText()).not.toContain('aaa');

    input.clear().then(function() {
      input.sendKeys('123');
      expect(model.getText()).toContain('123');
    });
  });
</script>
<script>
  angular.module('macapp', [])
    .controller('macController', ['$scope', function($scope) {
      $scope.regex = '^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$';
      $scope.upper = function(mac) {
        console.log(mac,'mac')
        if(mac != undefined) {
          $scope.mac_addr = mac.toUpperCase(); // Make every character uppercase
          console.log($scope.mac_addr,'model')
        }
      }
    }]);
</script>
<body ng-app="macapp">
  <div ng-controller="macController">
    <form name="form">
      <label for="input">Enter your MAC Address: </label>
      <input type="text" ng-model="mac_addr" ng-change="upper(mac_addr)" id="input" name="input" ng-pattern="regex" /><br>
      <hr>
      <span ng-if="form.input.$valid && mac_addr">About input? = Valid Mac Address<br></span>
      <span ng-if="!mac_addr">About input? = This field is required<br></span>
      <span ng-if="!form.input.$valid && mac_addr">About input? = Pattern doesnot match<br></span>      
      Your Input = <code>{{mac_addr}}</code>
    </form>
  </div>
</body>