JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<div id="container" ng-controller="ValidationCtrl">
    <form name="validationForm">
        <div>
            <label>Make Choice</label>
            <select ng-model="choice" ng-options="choice.label for choice in textChoices"></select>
        </div>

        <div ng-repeat="rules in choice.validation track by $index">
            <ng-form name="textForm">
                <label>Enter Text</label>
                <input type="text"
                       name="text"
                       ng-model="text[$index]"
                       ng-change="chkLength($index)">

                Min {{ rules.minLength }} Chars

                <div class="error" ng-show="minBad[$index]">
                    <small ng-show="minBad[$index]">Please enter min amount of characters.</small>
                </div>
            </ng-form>
        </div>
    </form>
</div>

JavaScript

var validationApp = angular.module('validationApp', []);

validationApp.controller('ValidationCtrl', ['$scope', function($scope) {
    $scope.textChoices = [
        { label: "1 line", validation: [ { minLength: 3 } ] },
        { label: "2 lines", validation: [ { minLength: 1 }, { minLength: 3 } ] },
        { label: "3 lines", validation: [ { minLength: 2 }, { minLength: 2 }, { minLength: 3 } ] }
    ];
    
    $scope.chkLength = function(i) {
        $scope.minBad[i] = ($scope.text[i].length < $scope.choice.validation[i].minLength);
        console.log(i + " " + $scope.text[i].length +  " " +  $scope.choice.validation[i].minLength);
    };
    $scope.minBad = {};
    
    $scope.choice = $scope.textChoices[0];
    $scope.text = [];
}]);