JSFiddle - React, Tailwind, and code Playground

by Rik Flink

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<style type="text/css">
  input.ng-invalid{
    color:#FA787E;
  }
  </style>
<body ng-app="ngPatternExample">
  <script>
  angular.module('ngPatternExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.regex = /^\d+9\d{7}(01|02|03|04|16|17|25|30)$/;
    }]);
</script>
<div ng-controller="ExampleController">
  <form name="form">
    <label for="input">BIG nr: </label>
    <input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" ng-Maxlength="11" ng-Minlength="10"/>
    <span ng-show="form.input.$valid && model.length && !form.input.$error.pattern"><button typw="button">Validate</button></span>
     <br>
     
    <hr>
    input valid? = <code>{{form.input.$valid}}</code><br>
    model = <code>{{model}}</code><br>
    length = <code>{{model.length}}</code><br>
    error = <code>{{form.input.$error}}</code><br>
    error.pattern = <code>{{form.input.$error.pattern}}</code>
  </form>
</div>
</body>