JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <check-form submitted="state.submitted" test2="state.test2" test4="state.test4" show-test2-error="state.showTest2Error" show-test4-error="state.showTest4Error"></check-form>
        <form id="test">
            <div>
                <input type="text" class="test1" id="test2" name="test2" ng-model="state.test2" />
                <span ng-show="state.showTest2Error" class="red">Test2 input error!</span>
            </div>
            <div>
                <input type="text" class="test3" id="test4" name="test4" ng-model="state.test4" />
                <span ng-show="state.showTest4Error" class="red">Test4 input error!</span>
            </div>
        </form>
        <div>
            <input type="button" ng-click="save()" value="submit" />
        </div>
    </div>
</body>

CSS

.red {
    color: red;
}

JavaScript

angular.module('myApp', [])
    .controller('MyCtrl', [
        '$scope',
        function($scope) {
            $scope.state = {};
            $scope.state.submitted = false;
            $scope.state.showTest2Error = false;
            $scope.state.showTest4Error = false;
            $scope.save = function (formId) {
                $scope.state.submitted = true;
            };
    }])
    .directive('checkForm', [
        function() {
            return {
                template: '',
                scope: {
                    'submitted': '=',
                    'test2': '=',
                    'test4': '=',
                    'showTest2Error': '=',
                    'showTest4Error': '='
                },
                restrict: 'E',
                link: function(scope, element, attr) {
                    scope.$watch('submitted', function(newVal, oldVal) {
                        // if newVal === true (so submitted === true), we just submit form
                        if (newVal) {
                            // should see 'true' output to console
                            console.log(newVal);
                            // output values of the 2 input boxes.
                            console.log(scope.test2);
                            console.log(scope.test4);
                            // do DOM manipulation here using the ids of the input
                            // here, we trigger this when the value of the first input box is 'abcd'
                            if (scope.test2 === 'abcd') {
                                scope.showTest2Error = true;
                            } else {
                                scope.showTest2Error = false;
                            }
                            // show error for 2nd input box when its value is 'efgh'
                            if (scope.test4 === 'efgh') {
                                scope.showTest4Error = true;
                            } else {
                  ...