JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
  <div ng-controller="myForm">
    <form name="formElement" ng-submit="log(user)" novalidate>
      <div class="row">
        <label>
          Name:
          <input type="text" name="name" ng-model="user.name" placeholder="{{formElement.$submitted && formElement.name.$invalid ? 'Invalid name' : 'Default placeholder'}}" required>
        </label>
      </div>
      <div class="row">
        <button type="submit">Submit</button>
      </div>
    </form>
    
    <h3>Logs:</h3>
    <div class="logs">
      <div>
        <strong>user:</strong> {{user | json}}
      </div>
      <div ng-class="{error: formElement.$submitted && formElement.name.$invalid}">
        <strong>name:</strong> {{formElement.name | json}}
      </div>
    </div>
  </div>
</div>

CSS

.error {
  color: red;
}

JavaScript

angular.module('myApp', [])
  .controller('myForm', ['$scope', function($scope) {
    $scope.user = {};
  }]);