JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<div ng-app='MyModule' ng-controller='MyController'>
    <form name="formuser" novalidate>

        <input type="text" name="firstname" ng-model="firstname" ng-class="{ 'has-error' : (formuser.firstname.$invalid && !formuser.firstname.$pristine) || hasSubmitted}" required />

        <button ng-if="!formuser.$invalid" type="submit" ng-click="setSubmitted()">Submit</button>
        <button ng-if="formuser.$invalid" type="button" ng-click="setSubmitted()" class="not-really-the-submit-button">Submit</button>
        hasSubmitted = {{hasSubmitted}}
    </form>
    
</div>

CSS

.not-really-the-submit-button{
    color: DarkGray;
}

JavaScript

angular.module('MyModule', [])

.controller( 'MyController', function($scope){
    $scope.hasSubmitted = false;
    
    $scope.setSubmitted = function(){
        $scope.hasSubmitted = true;
    };
});