JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
<form ng-controller="MyController" name="form">
    <input type="text" ng-model="field1" ng-required="true" />
    <br />
    <input type="text" ng-model="field2" ng-required="enforceRequired" />
    <br />
    <input type="text" ng-model="field3" ng-required="enforceRequired" />
    <br />
    <input type="text" ng-model="field4" ng-required="enforceRequired" />
    <br />
    <input type="button" ng-click="saveDraft()" value="Save Draft" />&nbsp;
    <input type="button" ng-click="publish()" value="Publish" />
    <input type="button" ng-click="enforceRequired = !enforceRequired" value="Switch" />
    <div>enforced: {{enforceRequired}}</div>
</form>
</div>

CSS

input.ng-invalid {
    border:1px solid red;
}

JavaScript

function MyController($scope) {

    $scope.enforceRequired = false;
    $scope.field1 = "";
    $scope.field2 = "";
    $scope.field3 = "";
    $scope.field4 = "";

    $scope.saveDraft = function () {           
        if ($scope.form.$valid) {
            alert("Draft saved!");
        }
    };

    $scope.publish = function () {        
        if ($scope.form.$valid) {
            alert("Published!");
        }
    };

}