JSFiddle - React, Tailwind, and code Playground

by jtassin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<div ng-app="myApp">
<form novalidate focus-first>
<div>
  <input ng-model="f1" name="f1" type="text" required />
</div>
<input ng-model="f2" name="f2" type="text" required />
<input type="submit" />
</form>
</div>

JavaScript

const app = angular.module('myApp', []);

app.directive('focusFirst', () => ({
	restrict: 'A',
  link: (scope, element, attrs) => {
    element.on('submit', (event) => {
      event.preventDefault();
      const formCtrl = angular.element(event.target).controller("form");
      formCtrl.$$controls.some((input) => {
      	if (input.$invalid) {
          input.$$element[0].focus();
          return true;
        }
      });            
    })
  }
}));