JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="MainController as ctrl">
        <form name="myForm" ng-submit="onSubmit()">
            <input type="number" ng-model="price" name="price_field" ng-pattern="pattern" required></input><span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span><br/>
            <input type="text" ng-model="other" name="other_field" ng-pattern="regex" required></input> <span ng-show="myForm.other_field.$error.pattern">Not a valid pattern!</span>

            <input type="submit" value="submit" ng-disabled="myForm.$invalid"></input>
        </form>{{pattern.source}}</div>
</div>

JavaScript

var app = angular.module('app', [])

    .controller('MainController',

function ($scope, regexValue) {

    $scope.onSubmit = function () {
        alert("form submitted");
    };
    
    $scope.pattern = /^[0-9]{1,7}$/;

    $scope.regex = regexValue.PASSWORD_REGEX;
})

    .value('regexValue', {
    PASSWORD_REGEX: /passwordregex/
})