JSFiddle - React, Tailwind, and code Playground

by gangadharjannu

HTML

<div ng-controller="MyController as vm">
  <form name="formsToSign" novalidate class="form-validation">
    <div class="row">
      <div class="col-xs-12 form-group">
        <div class="col-xs-4">
          <label>mail {{vm.isMailReqired}}</label>
          <input ng-required="vm.isMailReqired" pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox" ng-disabled="!vm.isMailReqired"
          ng-model="vm.model.emails.beitEsek" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="pull-left">
        <!--Show this button when form is valid only -->
        <button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="formsToSign.$invalid" class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>

      </div>
    </div>
  </form>

</div>

JavaScript

angular
  .module('myApp', []);
angular
  .module('myApp')
  .controller('MyController', MyController);
MyController.$inject = [];

function MyController() {
  var vm = this;
  vm.isMailReqired = true;
}