JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <form name="mainForm" ng-controller="AppController" autocomplete="off">
        <input type="text" ng-model="email" ng-required="emailRequired" ng-pattern="emailPattern" />
        <button ng-disabled="mainForm.$invalid" ng-click="submit()">Submit</button>
        <br />
        <span ng-show="mainForm.$valid">Valid email</span>
    </form>
</div>

JavaScript

var app = angular.module("app",[]);

app.controller("AppController", function($scope) {
    $scope.email = '';
    $scope.emailRequired = true;
    $scope.action = new function () {
        console.log($scope.mainForm);
    }
    $scope.emailPattern = (function() {
    var regexp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return {
        test: function(value) {
            if( $scope.emailRequired === false ) return true;
            else return regexp.test(value);
        }
    };
})();
});