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" />
</form>
</div>

CSS

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

JavaScript

function MyController($scope, $timeout) {

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

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

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

}